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属性之一更改时才重新渲染模板，因此性能更高。仍然可以重新渲染模板，但是它需要组件告诉角度何时进行渲染。示例：

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

Angular事件方法被多次调用

1 个答案: