尽管我们在父组件中更改了两次属性的值，但 ngOnChanges 没有被调用两次

Question

有两个组件，即 ParentComponent 和 ChildComponent。我们将一个变量从父组件绑定到子组件。根据角度文档，只要父组件中的属性值发生更改，就会调用子组件的“ngOnChanges”。现在在 ParentComponent 中，我们两次更改该变量的值，但在 ChildComponent 中，“ngOnChanges”只被调用一次。

父组件如下：

父组件.html

<p>parentcomponent works!</p>
<button (click)="onClicking()">Click here</button>
<app-childcomponent [temp]="inputfromparent"></app-childcomponent>

父组件.ts

import { Component, OnInit } from '@angular/core';

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

  private inputfromparent = "B"
  constructor() { }

  ngOnInit() {
  }

  onClicking(){
    this.inputfromparent = "C"; //line1
    console.log("Hello");
    this.inputfromparent= "D"; //line2
  }
}

子组件如下：

子组件.ts

import { Component, OnInit, OnChanges, Input } from '@angular/core';

@Component({
  selector: 'app-childcomponent',
  templateUrl: './childcomponent.component.html',
  styleUrls: ['./childcomponent.component.css']
})
export class ChildcomponentComponent implements OnInit, OnChanges{

  @Input() private temp = "A";
  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(change){
    var test = change;
    console.log(test);
    console.log(this.temp);
  }
}

在 ParentComponent.ts 文件中，每当在 ParentComponent.html 文件中定义的单击按钮上调用“onClicking”方法时，我们都会更改“inputfromparent”的值两次（参见第 1 行和第 2 行）。由于我们将此变量与 ChildComponent.ts 文件的变量“temp”绑定，因此 ChildComponent.ts 文件的“ngOnChanges”应该按照角度文档调用两次，如下所示：

A lifecycle hook that is called when any data-bound property of a directive changes. Define an ngOnChanges() method to handle the changes.

但 ChildComponent.ts 文件的“ngOnChanges”仅在 ParentComponent.html 文件中定义的单击按钮上调用“onClicking”时仅被调用一次。

我的疑问是，由于我们在 ParentComponent.ts 文件的“onClicking”方法中更改了“inputfromparent”的值两次，所以 ChildComponent.ts 文件的“ngOnChanges”应该被调用两次。但它只被调用一次。

Answer 1

  onClicking() {
    this.inputfromparent = "C"; //line1
    console.log("Hello");
    this.inputfromparent= "D"; //line2
  }

这是同步运行的。也就是说，在onClicking 结束运行之前不会执行其他代码：对于整个外部世界（模板引擎、更改检测等），onClicking() 被调用，在它之前，inputfromparent 的值是“B ”，然后是“D”。两者之间几乎是一个黑匣子。

Answer 2

你应该调用 changedetector 否则你会从 angular 中得到异常。请检查控制台。

export class ParentcomponentComponent implements OnInit {

  private inputfromparent = "B";
  constructor(private cd: ChangeDetectorRef) { }

  ngOnInit() {
  }

  onClicking(){
    this.inputfromparent = "C"; //line1
    this.cd.detectChanges();
    console.log("Hello");
    this.inputfromparent= "D"; //line2
    this.cd.detectChanges();
  }
}

一些想法： inputfromparent 应该是公开的，以避免使用 AOT 进行生产构建 ChildComponent 应使用 OnPush 更改检测。