Angular RxJs 各种解订阅方式

昨天说到了将资料订阅出来渲染在页面上的事，那麽就就来说说 RxJs 解订阅这件事吧。
这也是为了避免 memory leak，或重覆订阅所造成的 BUG，若非有限订阅，通常在订阅离开後，都需要解订阅。

转换为的 Observable

first

只执行第一次，通常用於第一次进来读取成功取得资料後，就不需再次执行

export class RxjsOndestroyComponent implements OnInit, OnDestroy {
  private destroy$: Subject<boolean> = new Subject();
  private timer$: Observable<number> = timer(0, 1000);

  constructor() {}

  ngOnInit(): void {
    this.timer$.pipe(first()).subscribe((time) => {
      console.log("time", time);
      this.count = time;
    });
  }
}

take(1)

只发生一次

export class RxjsOndestroyComponent implements OnInit, OnDestroy {
  private destroy$: Subject<boolean> = new Subject();
  private timer$: Observable<number> = timer(0, 1000);

  constructor() {}

  ngOnInit(): void {
    this.timer$.pipe(first()).subscribe((time) => {
      console.log("time", time);
      this.count = time;
    });
  }
}

take1 与 first 差异

takeUntil

持续执行，直到离开

export class RxjsOndestroyComponent implements OnInit, OnDestroy {
  private destroy$: Subject = new Subject<void>();
  private timer$: Observable<number> = timer(0, 1000);

  constructor() {}

  ngOnInit(): void {
    this.timer$.pipe(takeUntil(this.destroy$)).subscribe((time) => {
      console.log("time", time);
    });
  }

  ngOnDestroy(): void {
    this.onDestroy$.next();
    this.onDestroy$.complete();
  }
}

unsubscribe

export class RxjsOndestroyComponent implements OnInit, OnDestroy {
  private subscription: Subscription = new Subscription();
  private timer$: Observable<number> = timer(0, 1000);

  constructor() {}

  ngOnInit(): void {
    this.subscription.add(
      this.timer$.subscribe((time) => {
        console.log("time", time);
      })
    );
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

使用 Async Pipe

template

<div>{{ timer$ | async }}</div>

export class RxjsOndestroyComponent implements OnInit, OnDestroy {
  timer$: Observable<number> = timer(0, 1000).pipe(
    tap((time: number) => console.log("time", time))
  );
}

当 component 离开时，AsyncPipe 会自动取消订阅