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

Question

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

getSideBarState() // returns a boolean

在 'toggled' 和 'show' 中，当我第一次启动调试器时，ngClass 被触发并且运行至少 10 次以上。然后在最后一个运行s 之后，它等待大约 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>

Answer 1

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

getSideBarState 每次 Angular 应用程序中的变更检测运行都会被调用，几乎每个生命周期挂钩都会被调用，还有更多次（我不知道moment)，因为您在模板中使用函数（return 模板中的某些内容）而不是简单的变量绑定。

How you avoid this?

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

例如-

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>

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

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

Method being triggered every 10 seconds and run repeatedly in app.component.html file

javascript

typescript

ng-class

angular

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

Method being triggered every 10 seconds and run repeatedly in app.component.html file

javascript

typescript

ng-class

angular

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