Angular 事件方法被多次调用

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成分。

app-logo.component.html

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

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

app-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);
  }
}