Question

当我单击父用户界面中的重置按钮时，我想重置孩子的财产。这是第一次工作。即，当我单击“父母”的重置按钮时，第二次未调用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）。在那里，您可以实现不受组件层次结构约束的数据流。

角亲子沟通

1 个答案: