Angular 2. 不同级别的组件之间如何交互？

【问题标题】：Angular 2. How interact between different level components?Angular 2. 不同级别的组件之间如何交互？
【发布时间】：2017-07-26 05:31:18
【问题描述】：

据我所知，父子组件和子父组件之间有多种交互方式，例如EventEmitter。但是有没有什么方法可以在不是父子关系或子父关系的组件之间进行交互，这与为此目的使用 Service 不同？

【问题讨论】：

不，使用共享服务angular.io/docs/ts/latest/cookbook/…

标签： angular

【解决方案1】：

使用这个类

import { EventEmitter, Injectable } from "@angular/core";
@Injectable()
export class SharedService {
  private emitter: EventEmitter<any>;
  constructor() {
    this.emitter = new EventEmitter<any>();
  }
  getEmitter(): EventEmitter<any> {
    return this.emitter;
  }
  emit(data: any): void {
    this.emitter.emit(data);
  }
}

并在组件中订阅事件，如

@Component({
 template: ''
})
export class MyComponent{
 constructor(private emitter: SharedService){
   this.emitter.getEmitter().subscribe(e => {
    // do stuff here
   });
 }
}

不要忘记将它添加到 NgModule 中并将其用作服务。

【讨论】：