Angular 2 在显示之前渲染单个页面多少次？答案

【问题标题】：How many times does Angular 2 render a single page before showing it?Angular 2 在显示之前渲染单个页面多少次？
【发布时间】：2018-01-12 00:46:23
【问题描述】：

我在我的项目中使用 Angular 2。我的模板中有一个简单的 div，它调用我的 .ts 文件中的一个函数，该函数输出一个简单的文本，如下所示：

<div>{{ test() }}</div>

private test(): void {
    console.log("Test text");
}

当我加载一个页面时，我多次得到相同的输出，如下所示：

Test text
Test text
Test text
Test text
Test text

这是否意味着 Angular 2 在实际显示模板之前多次渲染模板，因此每次都调用函数？

【问题讨论】：

表示多次触发变更检测，阅读Everything you need to know about change detection in Angular

标签： html angular rendering angular2-template console.log

【解决方案1】：

是的，它会多次渲染，因为 ChangeDetectionStrategy 始终为“默认”，这意味着它始终（多次）检查 UI 更新

ChangeDetectionStrategy.OnPush 使用 OnPush：OnPush 表示水化过程中变化检测器的模式将设置为 CheckOnce。

如果你使用 ChangeDetectionStrategy.OnPush 那么它只会打印一次

changeDetection：ChangeDetectionStrategy.OnPush

https://angular.io/api/core/ChangeDetectionStrategy

https://plnkr.co/edit/lNXNsS?p=preview

Code Snippet
    @Component({
      changeDetection: ChangeDetectionStrategy.OnPush,
      selector: 'my-app',
      template: `
        <div>
        Check Console
          <h2>{{print()}}</h2>
        </div>
      `,
    })
    export class App {
      name:string;
      constructor() {
        this.name = `Angular! v${VERSION.full}`
        console.log("Called Once")
      }

      print(): void {
        console.log("I am printing only one time"):
      }
    }

【讨论】：

@Nisdex 希望这个答案对您有所帮助？

【解决方案2】：

Angular 只渲染一次 AppComponent 及其子组件，除非您添加 DOM 的删除部分，然后这些添加的部分将再次渲染。

您所体验的是 Angulars 更改检测，它运行得非常频繁。另见Why event triggers ChangeDetection even if OnPush strategy is ON?。

在值绑定中使用函数通常是个坏主意，因为每次 Angular 运行更改检测时都会调用此类函数。

更喜欢将值分配给属性并绑定到该属性。

<div>{{ testVal }}</div>

ngOnInit() {
  this.testVal = this.test();
}

private test(): string {
    console.log("Test text");
    return 'some string';
}

【讨论】：