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

Question

我正在为我的项目使用 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 在实际显示模板之前多次渲染模板，因此每次都调用函数？

Answer 1

是它呈现多次，因为 ChangeDetectionStrategy 总是 "Default" 意味着它总是（多次）检查 UI 更新

ChangeDetectionStrategy.OnPush Use OnPush: OnPush 表示变化检测器的模式将在水合作用期间设置为 CheckOnce。

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

更改检测：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"):
      }
    }

Answer 2

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

您遇到的是 Angular 运行相当频繁的更改检测。另见。

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

更喜欢将值分配给属性并改为绑定到此属性。

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

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

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

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

How many times does Angular 2 render a single page before showing it?

html

rendering

console.log

angular2-template

angular