时间戳

首页 > 解决方案 > Angular事件方法被多次调用

angular - Angular事件方法被多次调用

问题描述

在我的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：

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

            }
        );

标签： angular

解决方案

这是因为您Default在组件上使用更改检测策略。默认情况下，所有组件都使用此策略，这意味着当 Angular 确定组件的状态为脏时，它会重新渲染模板并testnDisplay调用函数。为了从默认检查中删除组件，您应该将策略设置为OnPush性能更高的策略，因为它仅在其中一个@Input属性更改时重新呈现模板。仍然可以重新渲染模板，但它需要组件告诉 Angular 何时这样做。例子：

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

推荐阅读