Angular2中的內存泄漏

Question

什麼會導致Angular2（rc5）應用程序中的內存泄漏？如何預防他們？

錯誤/正確的代碼示例將不勝感激。

Answer 1

在瀏覽器中，Angular僅僅是JavaScript，所以典型的注意事項適用。

Angular特別提醒的一點是Observables。一旦你訂閱了一個，它將繼續工作，直到你退訂，即使你導航到另一個視圖。你角unusbscribes如果可能的話（例如，如果您使用async管模板：

模式

//listenToServer returns an observable that keeps emitting updates 
serverMsgs = httpService.listenToServer(); 

模板

<div>{{serverMsgs | async}}</div> 

角將顯示在div服務器消息，但當您離開時結束訂閱。

但是，如果您訂閱自己，你也必須退訂：

模式

msgs$ = httpService.listenToServer().subscribe(
    msg => {this.serverMsgs.push(msg); console.log(msg)} 
); 

模板

<div *ngFor="let msg of serverMsgs">{{msg}}</div> 

當您離開，即使你看不到新郵件出現在視圖中，您將看到它們在到達時打印到控制檯。退訂當部件佈置的，你會怎麼做：

ngOnDestroy(){ this.msgs$.unsubscribe(); } 

From the docs：

我們必須取消角破壞組件之前。如果沒有 ，則可能會造成內存泄漏。

Answer 2

的訂閱和退訂方面是@BeetleJuice提到above肯定是我們需要牢記，以防止內存泄漏一號的預防措施。

要更好地理解一些內存管理技術，您可以查看Memory management in Angular applications。 （請注意，您可以在多個站點找到完全相同的文章。版權問題在這裏和那裏？）

有一點我特別想說的是「事件監聽器」。在最近完成的一個項目中，我使用Event發佈器和偵聽器來爲子組件與父組件進行對話。我特別堅持一條規則：

父組件僅偵聽DIRECT子組件。

在這裏，父組件充當容器組件，而子組件充當表示組件。

這樣我可以確保每當我刪除一個子組件時，只有一個點是直接父級，以刪除它的所有偵聽器。到目前爲止，這條規則對我來說非常有用。