Angular 5: компонент приложения перерисовывается несколько раз - PullRequest
Новая
       26

Angular 5: компонент приложения перерисовывается несколько раз

0 голосов
/ 12 октября 2018

Мой 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 показывает намного больше раз

Так что кто-то знает, почемуон перерисовывается несколько раз?

1 Ответ

0 голосов
/ 12 октября 2018

Это связано со стратегией обнаружения изменений Angular по умолчанию.Если вы измените стратегию на onPush, вы увидите, что функция выполняется только один раз.

Вот пример StackBlitz: https://stackblitz.com/edit/angular-dfhfs7?file=src%2Fapp%2Fapp.component.ts

Если вы закомментируете обнаружение изменений или установите егопо умолчанию вы увидите консольный оператор несколько раз.Если вы установите для него значение onPush, вы увидите инструкцию log только один раз.

Вот статья, которая может вам помочь: https://netbasal.com/a-comprehensive-guide-to-angular-onpush-change-detection-strategy-5bac493074a4

...