Angular 2，孩子到父母和回到孩子的沟通答案

【问题标题】：Angular 2, child to parent and back to child communicationAngular 2，孩子到父母和回到孩子的沟通
【发布时间】：2017-07-01 18:17:32
【问题描述】：

首先感谢您的宝贵时间。

我是 Angular 2 的新手，我正在尝试了解如何解决我遇到的这个问题。

组件结构：

<parent-component>
  <dynamic-button></dynamic-button>
  <dynamic-button></dynamic-button>
  ...
</parent-component>

子组件

export class DynamicButtonComponent {
  @Output() clicked: EventEmitter<any> = new EventEmitter<any>();

  loading: Boolean = false;
  handleClick(event: any) {
    this.loading = true;
    this.clicked.emit(event);
  }
};

当我点击动态按钮时，我正在向父级发送一个事件。使用“加载”变量的按钮旁边将显示一个微调器。然后父级进行 API 调用，当 API 调用完成后，我想从父级（最初发送事件）向子组件发送一个道具以停止显示微调器。

请告知解决此问题的最佳/最干净的方法。我想对事件发射器进行回调，但我在 StackOverflow 中读到它违反了 Angular 2 的原则

【问题讨论】：

绑定到父对象的 @Input 属性会在你的 api 回调中更新吗？ angular.io/docs/ts/latest/cookbook/…
您通常使用服务在组件之间共享状态。这是实现您所描述的微调器服务的代码大纲：stackoverflow.com/a/42041945
@AngularFrance 首先感谢您的回复。在我的场景中，每个按钮都可以有一个微调器组件，它们都订阅同一个服务吗？
嗯。在这种情况下，您必须以不同的方式构造代码。我仍然会使用服务，但不仅仅是发出启动/停止事件，我还会传递一些 id 来识别要启动/停止的按钮。使用输入/输出进行父子通信的问题是 1）每个按钮都有很多样板代码； 2）您可能最终会遇到这样一种情况，即按钮并不总是执行操作的父级的直接子级。使用服务可以绕过这些限制。

标签： angular

【解决方案1】：

您可以使用 OnChanges 生命周期挂钩来捕获子组件上的 @Input 更新以进行处理。

家长：

export class ParentComponent {
    finishedLoading: boolean = false;
    doApiWork(){
        ...
        finishedLoading = true;
    }
}

孩子：

export class DynamicButtonComponent implements OnChanges{
    @Input() loadingDone = false;

    ngOnChanges(){
        if(loadingDone){
           //Execute 
        }
    }
}

在视图中绑定：

<parent-component>
  <dynamic-button [loadingDone]="finishedLoading"></dynamic-button>
  ...
</parent-component>

【讨论】：

这最初是我的想法，但我对这种方法有几个问题，1. 输入 loadingDone 将在更新为 true 时发送到所有 DynamicButton 组件，你如何只将它发送到相关的组件，或者你如何让不相关的组件忽略它。 2. 然后如何在不触发所有 DynamicButton 组件的重新渲染的情况下将 finishedLoading 恢复为 false
@BobinVarghese 如果您有静态数量的 DynamicButton 组件，那么您可以使用一个位数组来保持每个组件的状态。如果它们是使用 *ngFor 以编程方式生成的，则可以使用循环的索引来做出逻辑决策。