Angular2中的内存泄漏

Question

什么会导致Angular2(rc5)应用程序中的内存泄漏？如何预防？

错误/正确的代码示例将非常感激.

Answer 1

在浏览器中,Angular只是JavaScript,所以典型的警告适用.

Angular特别警告的一件事是Observables.一旦您订阅了一个,即使您导航到另一个视图,它也会一直有效,直到您取消订阅为止.在可能的情况下,Angular会出现异常情况(例如,如果您async在模板中使用管道:

模型

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

模板

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

Angular将在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(); }

来自文档:

我们必须在Angular破坏组件之前取消订阅.如果不这样做可能会造成内存泄漏.