javascript - page - script tag angular 4

Prevenir las fugas de memoria en Angular 2?

Question

En Angular 2, ¿hay algún inconveniente específico con respecto a la gestión de la memoria, que debo tener en cuenta?

¿Cuáles son las mejores prácticas para gestionar el estado de los componentes para evitar posibles fugas?

Específicamente, he visto a algunas personas ngOnDestroy la suscripción de observables HTTP en el método ngOnDestroy . ¿Siempre debería hacer eso?

En Angular 1.XI sé que cuando se destruye un $scope , todos los oyentes también se destruyen automáticamente. ¿Qué pasa con los observables en componentes Angular 2?

@Component({
  selector: ''library'',
  template: `
    <tr *ngFor="#book of books | async">
        <td>{{ book.title.text }}</td>
        <td>{{ book.author.text }}</td>
    </tr>
  `
})
export class Library {
    books: Observable<any>;

    constructor(private backend: Backend) {
        this.books = this.backend.get(''/texts''); // <-- does it get destroyed
                                                 //     with the component?
    }
};

Answer 1

No tiene que darse de baja de las suscripciones estándar como después de http.get (). Pero TIENE que darse de baja de la suscripción en sus Temas personalizados. Si tiene algún componente y, dentro de él, se suscribe a algún Asunto en su servicio, cada vez que muestre ese componente se agregará una nueva suscripción al Asunto.

Por favor revise esto: una buena solución para que sus componentes estén "limpios"

Mi enfoque personal - todos mis componentes se extienden desde esta clase agradable:

import { OnDestroy, OnInit } from ''@angular/core'';
import { Subject } from ''rxjs/Subject'';

/**
 * A component that cleans all subscriptions with oneself
 * https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscription
 * @class NeatComponent
 */
export abstract class NeatComponent implements OnDestroy, OnInit {
// Add ''.takeUntil(this.ngUnsubscribe)'' before every ''.subscrybe(...)''
// and this subscriptions will be cleaned up on component destroy.

  protected ngUnsubscribe: Subject<any> = new Subject();

  public ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

  public ngOnInit(){}
}

Y acabo de agregar super () call al constructor y .takeUntil (this.ngUnsubscribe) antes de cada suscripción:

import { NeatComponent } from ''../../types/neat.component'';

@Component({
  selector: ''category-selector'',
  templateUrl: ''./category-selector.component.pug''
})
export class CategorySelectorComponent extends NeatComponent {

  public constructor(
    private _shopService: ShopsService
  ) { super(); }

  public ngOnInit() {
    this._shopService.categories.takeUntil(this.ngUnsubscribe)
      .subscribe((categories: any) => {
        // your code here
      })
  }
}

Answer 2

Según lo solicitado por @katspaugh

En su caso específico, no es necesario cancelar la suscripción manualmente, ya que ese es el trabajo de la tubería Async.

Compruebe el código fuente de AsyncPipe. Por brevedad estoy publicando el código correspondiente.

class AsyncPipe implements PipeTransform, OnDestroy {
    // ...
    ngOnDestroy(): void {
        if (isPresent(this._subscription)) {
          this._dispose();
        }
    }

Como puede ver, la tubería Async implementa OnDestroy, y cuando se destruye, verifica si hay alguna suscripción y la elimina.

En este caso específico, estarías reinventando la rueda (perdóname por repetirme). Esto no significa que no pueda / no deba darse de baja en ningún otro caso como el que hizo referencia. En ese caso, el usuario está pasando el Observable entre componentes para comunicarlo, por lo que es una buena práctica cancelar la suscripción manualmente.

No estoy al tanto de si el marco puede detectar suscripciones vivas y anular su suscripción automáticamente cuando se destruyen los Componentes, eso requeriría más investigación, por supuesto.

Espero que esto aclare un poco sobre la pipa asincrónica.