Angular事件方法被多次调用 [英] Angular event method getting called multiple times

问题描述

在我的app.component.ts中，我正在进行API调用并获取userDetails.然后，我发出此userDetails.我已经在我的header组件中订阅了该userDetails.我的标头组件使用app-my-image-logo组件.在页面刷新时，将调用API并获取userDetails.之后，将发出事件，因此将调用testnDisplay方法.但是我的问题是每隔几秒钟，我会在控制台上获得以下输出.

In my app.component.ts I am making an API call and fetching userDetails. I am then emitting this userDetails. I have subscribed to this userDetails in my header component. My header component uses app-my-image-logo component. On page refresh, API is called and userDetails are fetched. After that, event is emitted and therefore, testnDisplay method is called. But my problem is every few seconds, I get the following output on my console.

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

因此，该方法在频繁间隔后会被多次调用，但应该只被调用一次.

So, this method is getting called multiple times after frequent intervals but it should have been called only once.

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){

            }
        );

推荐答案

这是因为您正在组件上使用Default更改检测策略.默认情况下，所有组件都使用此策略，这意味着当Angular确定组件的状态为脏状态时，它将重新渲染模板并导致调用testnDisplay函数.为了从默认检查中删除该组件，您应该将策略设置为OnPush，因为该策略只在@Input属性之一更改时才重新渲染模板，因此性能更高.仍然可以重新渲染模板，但是它需要组件告诉角度何时进行渲染.示例:

This is because you are using the Default change detection strategy on your component. By default all components use this strategy which means that when Angular determines a component's state is dirty it re-renders the template and cause the testnDisplay function to be called. In order to remove the component from default checking you should set the strategy to OnPush which is much more perfomant because it only re-renders the template when one of the @Input properties changes. It is still possible to have the template re-rendered but it requires the component to tell angular when to do so. Example:

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

这篇关于Angular事件方法被多次调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！