我有一个家长组件
@Component({
selector: 'parent-component',
templateUrl: 'parent-component.html',
})
export class ParentComponent {
items : SomeClass[] = [....]; // Populated array
onSomeEvent() {
this.items[1] = new SomeClass(..);
}
}
与模板
<tr *ngFor="let item of items">
<child-component [item]="item"/>
</tr>
我有一个子组件
@Component({
selector: 'child-component',
templateUrl: 'child-component.html',
})
export class ChildComponent implements OnChanges {
@Input() item! : SomeClass;
constructor() {
console.log('Child#constructor');
}
ngOnChanges(changes : SimpleChanges) : void {
for (const propName in changes) {
const change : SimpleChange = changes[propName];
console.log('Child#ngOnChanges prop="' + propName + '" change=' + change);
}
}
}
我在父组件中更改了数组的一个元素,子组件将被重新创建,而不是被通知输入的更改.
即调用ParentCompoenent #onSomeEvent()导致日志(log):
Child#constructor
Child#ngOnChanges prop="item" change={previousValue:undefined currentValue=SomeClass(..) firstChange=true}
为什么要重新创建ChildComponent,而不是仅仅调用ngOnChanges?