时间戳

首页 > 解决方案 > 方法每 10 秒触发一次并在 app.component.html 文件中重复运行

javascript - 方法每 10 秒触发一次并在 app.component.html 文件中重复运行

问题描述

我有一个 Angular 9 应用程序（最近从 7 升级，但在 7 中仍然有同样的问题），在我的 app.component.html 文件中我有下面的代码。页面加载正确，一切看起来都很好。但是方法

getSideBarState() // 返回一个布尔值

在我第一次启动调试器时，'toggled' 和 'show' ngClass 都会被触发并运行至少 10 次以上。然后在最后一个运行后，它等待约 10 秒，然后再次触发约 10 秒并运行。这会一直持续下去，无休止地被触发和运行。

谁能告诉我为什么，以及如何阻止它被触发并运行这么多次？我只希望它在应用程序首次加载时运行一次。

<div class="page-wrapper" [ngClass]="{'toggled' : getSideBarState()}" (window:resize)="onResize()">
  <app-sidebar></app-sidebar>
  <main class="page-content">
    <div class="">
      <app-nav-bar></app-nav-bar>
      <router-outlet (activate)="onActivate($event)"></router-outlet>
    </div>
    <div class="overlay" (click)="toggleSidebar()" [ngClass]="{'show' : !getSideBarState()}"></div>
  </main>
</div>

标签： javascriptangulartypescriptng-class

解决方案

这是按照 Angular 的设计工作的。

getSideBarState每次更改检测在 Angular 应用程序中运行时都会被调用，几乎在每个生命周期钩子上以及更多次（目前我不知道），因为您在模板中使用函数（返回模板的内容）而不是简单的变量绑定。

你如何避免这种情况？

为了避免调用你getSideBarState的函数ngOnInit或其他合适的生命周期钩子并将返回值分配给一个变量，然后绑定到模板中的那个变量，这样它就不会运行多次。

例如 -

ngOnInit() {
    getSideBarState();
}
getSideBarState() {
    ... Some calculations (here `classState` is variable)
    classState = true/false;    // return value
}

<div class="page-wrapper" [ngClass]="{'toggled' : classState}" (window:resize)="onResize()">
  <app-sidebar></app-sidebar>
  <main class="page-content">
    <div class="">
      <app-nav-bar></app-nav-bar>
      <router-outlet (activate)="onActivate($event)"></router-outlet>
    </div>
    <div class="overlay" (click)="toggleSidebar()" [ngClass]="{'show' :!classState}"></div>
  </main>
</div>

希望这个答案对您有所帮助。

推荐阅读