Утечка памяти в Angular2

Ответ 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 уничтожит компонент. Неспособность это может привести к утечке памяти.

Ответ 2

Аспект подписки и отмены подписки, который @BeetleJuice, упомянутый выше, безусловно, является необходимой мерой предосторожности №1 помнить о предотвращении утечки памяти.

Чтобы лучше понять некоторые методы управления памятью, вы можете посмотреть Управление памятью в приложениях Angular. (Заметьте, что вы можете найти одну и ту же статью на нескольких сайтах. Вопрос об авторских правах здесь и там?)

Есть одна вещь, которую я хотел бы сказать о "слушателях событий" в частности. В последнем проекте, который я сделал, я использую Event-эмиттер и слушатели для дочерних компонентов, чтобы поговорить с родительскими компонентами. Я специально придерживаюсь одного правила:

Родительские компоненты прослушивают только дочерние компоненты DIRECT.

Здесь родительские компоненты действуют как компоненты контейнера, а дочерние компоненты действуют как составные компоненты.

Таким образом, я могу убедиться, что всякий раз, когда я удаляю дочерний компонент, есть только одно пятно, которое является прямым родителем, чтобы удалить всех его слушателей. Пока это правило работает очень хорошо для меня.