Метод углового события вызывается несколько раз

Question

В моем app.component.ts я делаю вызов API и извлекаю userDetails. Я тогда испускаю это userDetails. Я подписался на этот userDetails в моем header компоненте. Мой компонент заголовка использует компонент app-my-image-logo. При обновлении страницы вызывается API и извлекаются userDetails. После этого генерируется событие и, следовательно, вызывается метод testnDisplay. Но моя проблема каждые несколько секунд, я получаю следующий вывод на моей консоли.

img   my-image-logo.component.ts:28
name  my-image-logo.component.ts:28
img   my-image-logo.component.ts:28
name  my-image-logo.component.ts:28
img   my-image-logo.component.ts:28
name  my-image-logo.component.ts:28
img   my-image-logo.component.ts:28
name  my-image-logo.component.ts:28

Итак, этот метод вызывается несколько раз после частых интервалов, но его следовало вызывать только один раз.

header.component.html

<app-my-image-logo ></app-my-image-logo>

header.component.ts

ngOnInit() {
        const self = this;
        this.userDetails = this.dataService.getUserDetails();
        this.dataService.userDetailsEvt.subscribe(
            function(data){
                self.userDetails = data;
            }
        );

    }

Это app-my-logo компонент.

приложение-logo.component.html

<img #imgDiv  [hidden]="testnDisplay('img')" >

<div [hidden]="testnDisplay('name')"
     ></div>

приложение-logo.component.ts

testnDisplay(type){
        console.log(type);
}

Это мой dataService:

data.service.ts

setUserDetails(userDetails){
        this.userDetails = userDetails;
        this.userDetailsEvt.emit(this.userDetails);
    }

    getUserDetails(){
        return this.userDetails;
    }

app.component.ts

this.authService.httpPost("/auth/getUserDetails", payload).subscribe(
            function (data: any) {
                self.dataService.setUserDetails(data);
            },
            function(error){

            }
        );

Answer 1

Это потому, что вы используете стратегию обнаружения изменений Default для вашего компонента. По умолчанию все компоненты используют эту стратегию, что означает, что, когда Angular определяет, что состояние компонента загрязнено, он повторно отображает шаблон и вызывает функцию testnDisplay. Чтобы убрать компонент из проверки по умолчанию, вы должны установить стратегию на OnPush, что намного более удобно, потому что он перерисовывает шаблон только при изменении одного из свойств @Input. Шаблон все еще можно перерисовать, но он требует, чтобы компонент сообщал angular, когда это нужно сделать. Пример:

@Component({
  /* ... */
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppLogoComponent  {
  testnDisplay(type){
    console.log(type);
  }
}