Использование NgOnDestroy с сервисами в Angular
Когда компонент Angular уничтожается, вызывается метод жизненного цикла ngOnDestroy, чтобы мы могли очистить долгосрочные задачи или отписаться от любых RxJS Observables. В Angular Services также есть метод ngOnDestroy, аналогичный Angular-компонентам. Это может быть полезно, когда мы создаем и уничтожаем сервисы, которые должны выполнять некоторую очистку после уничтожения.
Некоторые службы могут иметь глобальные слушатели событий или длительные задачи, которые, если они больше не используются, должны быть очищены. Angular Services обычно по умолчанию являются синглетонами, но могут быть зарегистрированы для создания экземпляра для каждого компонента.
import { Component } from '@angular/core';
import { LogService } from './log.service';
@Component({
selector: 'app-hello',
template: `hello there`,
providers: [LogService]
})
export class HelloComponent {
constructor(private log: LogService) { }
}
В нашем примере у нас есть компонент, который использует LogService. LogService зарегистрирован для поставщиков компонентов, а не для корневого поставщика или NgModule. Это позволяет создавать и уничтожать сервис для каждого экземпляра нашего компонента.
У LogService будет смоделированная задача, которая будет каждую секунду регистрироваться в консоли.
import { Injectable } from '@angular/core';
@Injectable()
export class LogService {
count = 0;
constructor() {
console.log('constructor: logging starting...');
setInterval(() => {
console.log(this.count++);
}, 1000);
}
}
Когда служба будет создана, будет создан constructor и интервал, который будет регистрироваться каждую секунду.
В нашем примере мы переключаем наш компонент нажатием кнопки. Когда компонент отображается, компонент создается, а также экземпляр LogService. Когда компонент удаляется и LogService.
import { Injectable } from '@angular/core';
@Injectable()
export class LogService {
interval: any;
count = 0;
constructor() {
console.log('constructor: logging starting...');
this.interval = setInterval(() => {
console.log(this.count++);
}, 1000);
}
ngOnDestroy() {
console.log('ngOnDestroy: cleaning up...');
clearInterval(this.interval);
}
}
Когда наш сервис уничтожается, метод ngOnDestroy вызывается в нашем сервисе. Когда метод вызывается, мы можем очистить любые долгосрочные задачи, такие как наш интервал выполнения. Использование ngOnDestroy может быть полезным для обеспечения очистки задач в нашем приложении. Ознакомьтесь с полным рабочим демо ниже.
