Ionic Angular 组件渲染多次或无限次

Question

我有一个组件，由于某种原因会渲染多次（只通过构造函数和 onInit 一次），如果我有“动作”，那么它会无限渲染。 不，它没有卡在循环中，循环呈现它的一个项目，然后它尝试重新呈现整个组件。

import { Router } from '@angular/router';
import { Component, OnInit, Input } from '@angular/core';
import { HeaderAction } from '../../models/header-action';
import { UtilsService } from '../../services/utils';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {

  @Input()
  public title : string;

  @Input()
  public info : string;

  @Input()
  public actions : HeaderAction[];

  constructor(public utils: UtilsService, private router : Router) { 
  }

  ngOnInit() {
  }

  infinite(){
    console.log("infinite :(")
  }

  showEvent(action : HeaderAction) : boolean {
    console.log("inifinite in loop :(")
    return action.event;
  }

  showRedirect(action : HeaderAction) : boolean {
    return !action.event && !!action.redirect;
  }

}

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>{{title}}</ion-title>{{this.infinite()}}
    <ion-icon *ngIf="info" name="information-circle" (click)="utils.onInformationPopup(title,info)"></ion-icon>
    <ng-container *ngFor="let action of this.actions">
      <ion-icon *ngIf="this.showEvent(action)" name="{{action.name}}" (click)="action.event(action.context)"></ion-icon>
      <ion-icon *ngIf="this.showRedirect(action)" [routerDirection]="'root'" [routerLink]="[action.redirect]" name="{{action.name}}" ></ion-icon>
    </ng-container>
  </ion-toolbar>
</ion-header>

额外信息，这个组件是我在多个地方使用的组件，所以我将它添加到 shared.module.ts 的声明和导出中，这是我在所有页面中导入的模块。 我不认为这是错误的，但也许检查一下是件好事。

这是没有任何动作这是有动作

如果我注释掉路由器行，那么即使它有要迭代的操作，它也只会呈现多次。

此外，迭代具有相同的组件 ID，因为我添加了一个计数并且它正在递增。 请有人告诉我我只是没有看到简单的东西！

Answer 1

好的，感谢安德烈（我不知道我是否可以标记你抱歉）我找到了解决方案。

正如他提到的，它与 ChangeDetectionStrategy 有关。 对于较小的项目，我想它的速度足够快，您可以忽略它。

我的第一个想法是将 app.component.ts 设置为 onPush，这样一切都会受到影响。 这解决了我的一个问题，但打破了我的路由。 然后我想我需要将它添加到他们的 onInit 上的每个页面，以便他们知道他们已经被访问过。

但是，我的项目的大小仍然可以处理一些冗余，因此我只能在最初出现问题的页面中添加 onPush。 （在我的例子中，页面有要传递给标题组件的操作）。

我希望这对将来的其他人有帮助。 谢谢安德烈。

如果其他人对我有更好的解决方案，请随时给我您的意见。 圣诞节快乐