Angular父子通信答案

【问题标题】：Angular Parent Child communicationAngular父子通信
【发布时间】：2018-12-22 12:37:21
【问题描述】：

当我点击父 UI 中的重置按钮时，我想重置孩子的属性。这是第一次。即，当我点击父级的重置按钮时，第二次不会调用子级的 ngOnChanges 方法。

以下选项对我来说很好。即在 child 中定义双向绑定并通过 this.resetChange.emit(false) 将状态传递回 parent；所以发生的事情是当父母的resetTriggered设置为false时，立即调用孩子的ngOnChanges，因为没有其他条件 (if(this.resetTriggered))，它在 child 中停止。

有没有更好的解决方案？即，我不想将变量状态传递给父级和父级来处理此事件。孩子应该处理所有事情，这样就不会依赖父母来处理这个孩子的状态变化。

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

【问题讨论】：

标签： angular

【解决方案1】：

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

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

【讨论】：