当我单击父UI中的重置按钮时，我想重置子项的属性 . 这是第一次有效 . 也就是说，当我点击Parent的重置按钮时，第二次没有调用Child的ngOnChanges方法 .
以下选项对我来说很好 . 即，在子节点中定义双向绑定，并通过this.resetChange.emit（false）将状态传递回父节点;所以发生的事情是当父的resetTriggered设置为false时，会立即调用child的ngOnChanges，因为没有其他条件（if（this.resetTriggered）），它会在child中停止 .
有更好的解决方案吗？即，我不想将变量状态传递给父级和父级来处理此事件 . 孩子应该处理所有事情，以便不依赖父母来处理这个孩子的状态变化 .
Parent HTML ：
<app-customer (select)="onCustomerIdSelect($event)" [(reset)]="resetTriggered"></app-customer>
<div style="text-align: right;padding-right: 10px;padding-top: 110px;">
<button class="btn btn-primary submit" (click)="resetFilters()">Reset</button>
</div>
Parent Component ：
resetTriggered: boolean = false;
onLocationReset(resetChild: boolean){
this.resetTriggered = resetChild;
}
ngAfterViewInit(){
this._changeDetectorRef.detectChanges();
}
ngAfterViewChecked(){
this._changeDetectorRef.detectChanges();
}
resetFilters() {
console.log('resetFilters()');
this.resetTriggered = true;
this.searchRequest.reset();
}
Child Component ：
resetTriggered: boolean;
@Output() resetChange: EventEmitter<boolean> = new EventEmitter<boolean>();
@Input() set reset(value) {
this.resetTriggered = value;
}
ngOnChanges()
{
console.log('reset in child - ' + this.resetTriggered);
if(this.resetTriggered)
{
this.resetChange.emit(false);
this.resetData();
}
}
1 回答
我强烈建议通过父和子之间的@ Input / @输出直接绑定组件交互 . 对于许多次要结构，这可能有用，但是只要你有大型项目进行多级嵌套，当你尝试从上到下渗透变量时，你可能会遇到麻烦 .
更好的解决方案是通过总线进行通信，允许发送/调度和接收/订阅数据 . 一个好的开始是ngrx => Angular redux实现（https://github.com/ngrx） . 在那里，您可以实现数据流未绑定到组件层次结构 .