Angular 4組件通信-子到父與訂戶

Question

我正在嘗試在角度4的父/子組件之間共享服務數據。我有一個有效的代碼，但不清楚這是否是最佳選擇。 我通過創建主題並訂閱可觀察的方法，使用可注射的服務類在父->子之間進行通信。 現在要向后溝通，即孩子->父母，我通過創建Subjects並訂閱parent中的observable來重用同一服務類。 這樣，我在孩子和父母中都訂閱了可觀察對象，這是正確的方法嗎？ 我在其他地方看到有人建議@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

我想說，如果您需要在父子之間來回通信，最好使用@Input（）和@Output（）。 原因是當組件出現或消失時，Angular會為您破壞/創建訂閱。 當需要在沒有父/子關系的組件之間廣播事件時，主題派上用場。 主題使用的一個示例是facebook。 收到消息后，頁面的多個部分將對該事件做出反應，而不會彼此相關。

但是，如果您實現ngOnDestroy來退訂主題，那將使您的解決方案保持整潔。 使用“主題”方法的風險是最終在您的應用中創建了數百個主題，這可能會導致性能問題。

Answer 2

您可以在ngOnDestroy生命周期掛鈎中取消訂閱，以防止內存泄漏，如此答案中所述：[ 如何退訂angular 2中的多個訂閱者

但是除非您需要這種額外的復雜性，否則僅使用@Output和EventEmitter可能是一個好主意。

Answer 3

@Input @Output可能會很慢，並且在您從孩子的孩子傳來時會變得復雜。

如果您也想在其他組件中使用該數據，則存儲方法會更好，更靈活。