角度5：应用程序组件重绘几次

Question

我的 app.component.html：

{{bla()}}

我的 app.component.ts：

import {Component, OnInit, AfterViewInit} from '@angular/core';

@Component({
    selector: 'idr-app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
    constructor() {}
    ngAfterViewInit() {}

    bla(){
        console.log(77777);
    }
}

我的 app.module.ts：

import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
      BrowserModule,


     BrowserAnimationsModule,
    ],
    providers: [

    ],
    bootstrap: [AppComponent],
})
export class AppModule {
}

在控制台我看到这种情况：

app.component.ts:13 77777
app.component.ts:13 77777
core.js:3688 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
app.component.ts:13 77777
app.component.ts:13 77777

如果我在子组件中使用类似 {{bla()}} 的东西，77777 会显示更多次

那么有人知道为什么它会重绘几次吗？

Answer 1

这是由于 Angular 的默认变更检测策略。如果将策略更改为 onPush，您将看到该函数仅执行一次。

这是一个 StackBlitz 示例：https://stackblitz.com/edit/angular-dfhfs7?file=src%2Fapp%2Fapp.component.ts

如果您注释掉更改检测，或将其设置为默认值，您将多次看到控制台语句。如果将其设置为 onPush，则只会看到一次日志语句。

这里有一篇文章可能会有所帮助：https://netbasal.com/a-comprehensive-guide-to-angular-onpush-change-detection-strategy-5bac493074a4