有两个组件,即 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.
但是,只要在 ParentComponent.html 文件中定义的单击按钮上调用“onClicking”时,ChildComponent.ts 文件的“ngOnChanges”只会被调用一次。
我的疑问是,由于我们在 ParentComponent.ts 文件的“onClicking”方法中更改了“inputfromparent”的值两次,所以 ChildComponent.ts 文件的“ngOnChanges”应该被调用两次。但它只被调用一次。