角亲子沟通

Question

当我单击父UI中的重置按钮时，我想重置孩子的财产。 这是第一次工作。 即，当我单击父级的重置按钮时，第二次不调用Child的ngOnChanges方法。

以下选项对我来说很好用。 也就是说，在子级中定义双向绑定，并通过this.resetChange.emit（false）将状态传递回父级。 因此，发生的事情是当父项的resetTriggered设置为false时，立即调用子项的ngOnChanges，并且由于没有其他条件（if（this.resetTriggered）），因此该子项在子项中停在那里。

有更好的解决方案吗？ 即，我不想将变量状态传递给父对象和父对象来处理此事件。 子级应该处理所有事情，以便不依赖父级来处理该子级的状态更改。

父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>

父组件 ：

   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();  
  }

子组件 ：

 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();
    }
  }

Answer 1

我强烈建议通过父级和子级之间的@ Input / @ Output直接绑定进行组件交互。 对于许多较小的结构，这可能会起作用，但是一旦您拥有带有多级嵌套的大型项目，尝试从上至下遍历变量时，您可能会头疼。

更好的解决方案是通过总线进行通信，从而允许发射/调度和接收/订阅数据。 一个好的开始是ngrx => Angular redux实现（ https://github.com/ngrx ）。 在那里，您可以实现不受组件层次结构约束的数据流。