Angular 4 组件通信 - 子级到父级与订阅者

Question

我正在尝试在 Angular 4 中的父/子组件之间共享服务数据。我有一个工作代码，但我不清楚这是否是最佳选择。我正在使用可注入(inject)服务类通过创建主题并订阅可观察方法来在父级->子级之间进行通信。现在，为了向后通信，即子 --> 父，我通过创建主题并订阅父中的可观察对象来重新使用相同的服务类。这样我就可以订阅子级和父级的可观察量，这是正确的方法吗？我在其他地方看到人们建议 @Output 装饰器在子->父之间进行通信，但我的代码正在使用订阅机制。将来会导致内存泄漏等问题吗？

父组件

  constructor(private _textdataservice: TinyEditorService, private _gmapService: GmapService) {
this.subscription = this._gmapService.getMessageC2P().subscribe((message) => {
  this.message = message;
  this.childCallingParent(message);
});
this.subscription = this._gmapService.getStoreSearchRequest().subscribe((radius) => {
  this.radius = radius;
  this.retrieveNearByLocations(radius);
});

}

子组件-->

  constructor(private _gmapService: GmapService) {
// subscribe to home component messages
this.mainSubscription = this._gmapService.getMessageP2C().subscribe((addresses) => {
  this.mainCoordinates = addresses;
});

this.storeSubscription = this._gmapService.getMessageP2CStore().subscribe((addresses) => {
  this.storeCoordinates = addresses;
  if(this.storeCoordinates){
    for(let coord of this.storeCoordinates){
      this.addNearbyStoremarker(coord.name, coord.latitude, coord.longitude);
    }
  }
});

}

服务-->

export class GmapService {
  private _dataurl='/assets/gmapmarkers.json';
  constructor(private _http: Http){}

  private parentSubject = new Subject<IGmapData[]>();
  private storeSubject = new Subject<IGmapData[]>();
  private childSubject = new Subject<String>();
  private radiusSubject = new Subject<number>();

  sendMessageP2C(latLngArray: IGmapData[]) {
    this.parentSubject.next(latLngArray);
  }

  sendMessageP2CStore(latLngArray: IGmapData[]) {
    this.storeSubject.next(latLngArray);
  }

  sendMessageC2P(message: string) {
    this.childSubject.next(message);
  }

  requestNearByLocations(radius: number) {
    this.radiusSubject.next(radius);
  }

  clearMessage() {
    this.parentSubject.next();
    this.childSubject.next();
  }

  getMessageP2C(): Observable<IGmapData[]> {
    return this.parentSubject.asObservable();
  }

  getMessageP2CStore(): Observable<IGmapData[]> {
    return this.storeSubject.asObservable();
  }

  getMessageC2P(): Observable<string> {
    return this.childSubject.asObservable();
  }

  getStoreSearchRequest(): Observable<number> {
    return this.radiusSubject.asObservable();
  }

  getStoreMarkers(): Observable<IGmapData[]> {
      return this._http.get(this._dataurl)
        .map((response: Response) => <IGmapData[]> response.json());
  }
}

Answer 1

我想说，如果您需要在 parent 和 child 之间来回通信，最好使用@Input()和@Output()。原因是当你的组件生效或消失时，Angular 会为你销毁/创建订阅。当您需要在没有父/子关系的组件之间广播事件时，Subjects 会派上用场。主题使用的一个例子是 facebook。当收到消息时，页面的多个部分将对该事件使用react，而彼此不相关。

但是，如果您实现 ngOnDestroy 来取消订阅您的主题，那么您的解决方案应该保持整洁。使用主题方法的风险是最终会在您的应用程序中创建数百个主题，这可能会导致性能问题。