Angular父子通信

Posted 2023-02-23

【中文标题】Angular父子通信

【英文标题】：Angular Parent Child communication

【发布时间】：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();
    
  

【参考方案1】：

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

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