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

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';
}

Answer 2

是它渲染多次，因为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"):
      }
    }

Angular 2在显示之前渲染一页多少次？

2 个答案: