angular - 为什么在只有一个输入变量的子组件中调用 ngOnChange 两次

Question

我有一个接受一个输入变量的子组件。子组件使用 ngOnChanges 以便对输入变量的任何更改都会触发更改。

一切正常，但是，我看到每次父组件加载时都会调用 ngOnChanges 两次。

示例代码：

父组件

  <div *ngIf="(devWidth > 576)">
     <app-child-component [inputParam]="paramValue"></app-child-component>
  </div>
  <div *ngIf="!(devWidth > 576)">
     <app-child-component [inputParam]="paramValue"></app-child-component>
  </div>

子组件 HTML

  <div>
     {{inputParam}}
  </div>

子组件 TS

  @Input() inputParam;

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges called with changes value: ', changes)
}

Answer 1

我的解决方案是

<app-child-component *ngIf="paramValue" [inputParam]="paramValue"></app-child-component>