角度如何解决无限递归？

Question

我正在学习这个 Udemy 课程： https://www.udemy.com/the-complete-guide-to-angular-2/

我在第 2.13 部分的字符串插值。

作为课程的一部分，您在组件中定义一个简单的函数来显示您的类的属性之一：

export class ServerComponent{
    serverId = 10;
    serverStatus = 'offline';

    getServerStatus(){
        return this.serverStatus;
    }
}

然后在您的组件 HTML 中，将该函数绑定到模板：

<P>Server with ID {{ serverId }} is {{ getServerStatus() }}</P>

我想测试的是，当您将该字符串插值标记绑定到自引用函数时会发生什么...例如：

getServerStatus(){
    this.serverStatus = this.serverStatus + this.serverStatus;
    return this.serverStatus;
}

当我运行这段代码时，我注意到页面显示如下：

server with ID 10 is offlineofflineofflineofflineofflineofflineofflineoffline

serverStatus 变量恰好重复 8 次。

我想知道为什么这个数量恰好是 8 次重复？ Angular 使用什么逻辑来决定“实时”模板指令在 8 次重复后从类属性中被切断。

Answer 1

Angular 在应用程序开始时启动两个更改检测周期。

也就是说，它调用了两次Application.tick()方法

1) 引导主组件后 (https://github.com/angular/angular/blob/aaaa34021c2d56f798d20e5a1f31b23972055170/packages/core/src/application_ref.ts#L539-L541)

private _loadComponent(componentRef: ComponentRef<any>): void {
  this.attachView(componentRef.hostView);
  this.tick();

2) 并且在第一个 VM 轮次上（当 zonejs 中没有微任务时）(https://github.com/angular/angular/blob/aaaa34021c2d56f798d20e5a1f31b23972055170/packages/core/src/application_ref.ts#L385-L386)

this._zone.onMicrotaskEmpty.subscribe(
  {next: () => { this._zone.run(() => { this.tick(); }); }});

考虑到这一点，让我们回到我们的Application.tick() 方法。它在视图树（组件视图或嵌入视图）上运行更改检测。

tick(): void {
   ...
    try {
      ...
      this._views.forEach((view) => view.detectChanges());
      if (this._enforceNoNewChanges) {
        this._views.forEach((view) => view.checkNoChanges());
      }
    } catch (e) {
      ...
    } finally {
      ...
    }
}

我们可以在这里注意到什么？

我们可以注意到处于开发模式（因为this._enforceNoNewChanges = isDevMode(); https://github.com/angular/angular/blob/aaaa34021c2d56f798d20e5a1f31b23972055170/packages/core/src/application_ref.ts#L383）Angular 运行了两次更改检测周期。

这里还有一点是tick方法是在try catch块内执行的。

那么，到目前为止我们有什么？

2 сd cycles * 2 view.detectChanges() on the tree = 4

还在每个view.detectChanges() Angular 上检查模板绑定是否已更改。为此，Angular 执行模板中的每个表达式（因此，您的 getServerStatus() 方法将在每次树遍历时执行）。如果在第二个 cd withih tick 方法期间绑定发生了一些变化，那么 Angular 会抛出错误 Expression has changed after it was checked。你可以猜到它不会停止后续的 cd 循环谢谢try catch 块。

为简单起见，假设您有以下模板：

{{ getServerStatus() }}

那么这里发生了什么？

Start app                                                              serverStatus 

 loadComponent => tick
                    |
                    |__ view.detectChanges()
                                   ||
                                   \/
                           call getServerStatus()                     'offlineoffline'

                    |__ view.checkNoChanges()
                                  ||
                                  \/
                           call getServerStatus()               'offlineofflineofflineoffline'

               'offlineoffline' !== 'offlineofflineofflineoffline'
                                  ||
                                  \/
    ExpressionChangedAfterItHasBeenCheckedError (template is not updated!!)

 onMicrotaskEmpty => tick
                    |
                    |__ view.detectChanges()
                                   ||
                                   \/
                           call getServerStatus()                     'offline'.repeat(8)

                    |__ view.checkNoChanges()
                                  ||
                                  \/
                           call getServerStatus()                     'offline'.repeat(16)

               'offline'.repeat(8) !== 'offline'.repeat(16)
                                  ||
                                  \/
     ExpressionChangedAfterItHasBeenCheckedError (template is not updated!!)

因此，您会得到准确的 8 次 serverStatus 重复