angular4兄弟组件交互，监听响应

Question

兄弟组件a和b，点击a里面的按钮请求数据后渲染图表，同时也让b里面的图表从新请求数据然后渲染， 能不能给个思路，跪求了，才接触ng4，经验不够。
我的想法是写个服务，两个组件都调用那个服务，把元数据参数放到服务里，a点击后改变元数据参数，但是b怎么监听元数据的变化做出请求数据的响应？？？

Answer 1

可以创建一个service，既然是用来渲染图表的，可以叫RenderChartService.
在这个service中要有一个subject，负责用来emit消息，同时可以被用来订阅消息。

@Injectable
class RenderChartService {
  private renderSubejct: Subject<any> = new Subject<any>();

  public getRenderSubject(): Observable {
      return this.renderSubject;
  }
  
  public emitRenderInfo(msg: any): void {
      if (msg) {
          this.renderSubject.next(msg);
      }
  }
}

将RenderChartService注入到组件a和组件b中，

这样在组件a中，按钮的事件处理函数中就可以这样写：

onClick() {
   //请求数据....
   this.renderChartService.emitRenderInfo(something); 
}

在组件b中来订阅RenderChartService中的subject

private renderChartSubscription: Subscription = null;
ngOnInit() {
   if (!this.renderChartSubscription) {
        this.renderChartSubscription 
            = this.renderChartService.getRenderSubject()
                .subscribe((res: any) => {
                
                });
            
   }
}

同时记得在组件ngOnDestroy时的时候，要取消订阅组件里的所有的订阅

ngOnDestroy() {
    if (this.renderChartSubscription) {
        this.renderChartSubscription.unsubscribe();
     }
}

Answer 2

@input@output也可以达到同样的效果