angular2 rxjs 取消订阅的最佳实践

    对于非一次性的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);
    });
  }
}