对于非一次性的Observable的订阅,是需要释放的(模板html的async除外),最佳实践是创建一个BaseComponent,为所有子类组件提供一个ngDestroyed$ Subject,在 ngOnDestroy() 勾子函数中执行next, complete,子类组件中只需takeUntil(ngDestroyed$)。
BaseComponent
import { OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
export class BaseComponent implements OnDestroy {
ngDestroyed$ = new Subject<void>();
ngOnDestroy(): void {
this.ngDestroyed$.next();
this.ngDestroyed$.complete();
}
}
调用示例
import { Component, OnInit } from '@angular/core';
import { takeUntil } from 'rxjs/operators';
import { BaseComponent } from '../base.component';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent extends BaseComponent implements OnInit{
constructor() {
super();
}
ngOnInit() {
onStartInterval();
}
onStartInterval() {
Observable
.interval(250)
.takeUntil(this.ngDestroyed$)
.subscribe(val => {
console.log('Current value:', val);
});
}
}