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

所以，这个方法在频繁的间隔后被多次调用，但它应该只被调用一次。

头文件.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：

数据服务.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);
  }
}