Angular：在沒有內存泄漏的情況下對不相關組件之間的通信感到困惑

Question

從我讀過的內容來看，不相關的 Angular 組件進行通信的首選方式是創建一個服務並使用 RxJS BehaviorSubject。 這是我發現的有關這種方法的許多在線參考資料之一：

https://fireship.io/lessons/sharing-data-between-angular-components-four-methods/

對於不相關的組件，這個站點和其他站點一樣，提倡在服務中做類似下面的事情：

private messageSource = new BehaviorSubject('default message');
currentMessage = this.messageSource.asObservable();

changeMessage(message: string) {
     this.messageSource.next(message)
}

然后，在另一個組件中：

ngOnInit() {
     this.data.currentMessage.subscribe(message => this.message = message)
}

這種方式非常簡單，我能夠使用這種方法共享數據。 然而，在我讀過的每一篇關於訂閱的參考文獻中，他們都說取消訂閱以避免內存泄漏很重要。 使用這種方法似乎無法取消訂閱。 在使用這種方法時，是否有什么我誤解或需要一些額外的步驟來避免內存泄漏？ 有什么我應該使用的方法嗎？

Answer 1

您可以在組件ngOnDestroy方法中輕松取消訂閱：

OtherComponent implements OnInit, OnDestroy {

  private subscription: Subscription;

  //...

  ngOnInit() {
    this.subscription = this.data.currentMessage.subscribe(
      message => this.message = message
    );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

或者，您可以使用 RxJs takeWhile和您發出的帶有銷毀值的主題做一些有趣的事情。

您可以在 Medium 上的這篇博文中找到該解決方案和其他優秀示例。

Answer 2

您可以取消訂閱組件的 onDestroy 生命周期鈎子。

subscription: Subscription

ngOnInit() {
 this.data.currentMessage.subscribe(message => this.message = message)
}

ngOnDestroy() {
 this.subscription.unsubscribe();
}

這意味着該特定組件在銷毀時將取消訂閱行為主體。

Answer 3

我的兩分錢：

我喜歡 Wilt 的鏈接中提到的 takeUntil 技術（盡管他不小心提到了 takeWhile）。 如果您喜歡使用繼承，我有一個類只用於處理這個問題，然后任何可能需要自動取消訂閱的組件都繼承自它。 它看起來像這樣：

export class Unsubscriber implements OnDestroy {

    unsubscribe$: Subject<void> = new Subject()

    constructor() {}

    ngOnDestroy() {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
    }
}

然后在您的組件中擴展該類，確保每次訂閱某些內容時添加以下內容：

.pipe(takeUntil(this.unsubscribe$))

所以就你的班級而言：

export class MyClass extends Unsubscriber implements OnInit, OnDestroy {

  //...

    ngOnInit() {
        this.data.currentMessage.pipe(takeUntil(this.unsubscribe$)).subscribe(message => this.message = message);
    }
}

我喜歡這個，因為無論您的組件當前有多少訂閱，它都可以工作。 唯一的煩惱是記得總是添加那個管道，盡管這不是什么可怕的負擔，即使在現有項目中，修復也不是太困難。