Angular：如何使用app.tick（）？任何人都可以给我一个ApplicationRef.tick（）的例子吗？

Question

当我们谈论Angular 2中的变化检测机制时，每个人都建议使用NgZone或ChangeDetectorRef 是否有任何application.tick（）/ ApplicationRef.tick（）的工作示例，它也与ChangeDetectorRef / NgZone做同样的事情。

第二个问题：API说，在DEV MODE中，ApplicationRef.tick（）不止一次地运行更改检测。

有没有办法只运行一次。因为我使用这种方法的那一刻，我得到一个错误说
递归调用ApplicationRef.tick（）

我使用tick（）面临的问题的类似示例是in this GIthub Link

我已经完成了Triggering Change Detection Manually Question.

此信息中的任何信息。 感谢。

Answer 1

ApplicationRef.tick()来电setTimeout((){})

只有在Angulars区域更新之外运行的代码时，您才应该需要此项Angulars模型和Angular因此无法通过NgZone收到有关更改的通知。

它只调用整个应用程序的变化检测。 通常，使用zone.run(() => {...})从使用ApplicationRef.tick()

更好地包装从外部更新模型的代码

ChangeDetectorRef.detectChanges()或ChangeDetectorRef.markForCheck()仅对特定元素（及其后代）起作用。

Answer 2

首先是什么 ApplicationRef ？

Application Ref包含对根视图的引用，可用于 使用刻度功能手动运行更改检测。

那我们如何使用tick()函数？

将其注入到组件构造函数中，并根据需要使用它！

---

Nb。我故意输入了 ChangeDetectionStrategy.OnPush 来删除自动更新，因此我们应该强制应用程序手动更新。

在这方面，我们将使用Tick()函数！

---

简单的测试案例：

component.ts

@Component ({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
   ...
   counter = 1;

   constructor (private appRef: ApplicationRef) {
     setInterval (() => this.counter ++, 1000);
   }

   updateApplication () {
     this.appRef.tick ();
   }
}

component.html

<h1>{{counter}}</h1>

<button (click)="updateApplication()"> UPDATE APP </button>

---

在我的示例中，每次单击 UPDATE APP 按钮时，我们调用tick()函数，该函数从应用程序根目录开始更新每个子组件。

因此，在我们的示例中，它将仅更新计数器变量。

Stackblitz Test Case

---

关于您的第二个问题，如果您可以避免在tick()中两次调用devMode，答案是您无法避免 >！

但是我认为这种行为不会导致递归调用，很可能是您未正确使用该函数，移植了调用tick()的组件或未禁用 changeDetection ，以便一起启动两个或多个 changeDetects 。