Angular 12: TypeError: teardown.unsubscribe不是一个函数

Question

在将我的应用升级到Angular 12之后，每当我离开一个ngOnDestroy函数包含.unsubscribe()调用的组件时，我都会收到这个奇怪的错误消息。更奇怪的是，我的项目中根本没有提到teardown.unsubscribe，这使得调试变得非常困难。

ERROR Error: Uncaught (in promise): UnsubscriptionError: 1 errors occurred during unsubscription:
    1) TypeError: teardown.unsubscribe is not a function
Error
    at _super (createErrorClass.js:4)
    at new UnsubscriptionErrorImpl (UnsubscriptionError.js:3)
    at SafeSubscriber.unsubscribe (Subscription.js:55)
    at SafeSubscriber.unsubscribe (Subscriber.js:55)
    at FooComponent.ngOnDestroy (my-foo.component.ts:58)
    at executeOnDestroys (core.js:7406)
    at cleanUpView (core.js:7309)
    at destroyViewTree (core.js:7142)
    at destroyLView (core.js:7287)
    at RootViewRef.destroy (core.js:22651)
    at resolvePromise (zone.js:1213)
    at resolvePromise (zone.js:1167)
    at zone.js:1279
    at ZoneDelegate.invokeTask (zone.js:406)
    at Object.onInvokeTask (core.js:28667)
    at ZoneDelegate.invokeTask (zone.js:405)
    at Zone.runTask (zone.js:178)
    at drainMicroTaskQueue (zone.js:582)
    at ZoneTask.invokeTask [as invoke] (zone.js:491)
    at invokeTask (zone.js:1600)

my-foo.component.ts

57: ngOnDestroy(): void {
58:     this.aSubscription$?.unsubscribe();
59:     this.bSubscription$?.unsubscribe();
60:     this.cSubscription$?.unsubscribe();
61:     this.dSubscription$?.unsubscribe();
62: }

Answer 1

如果你是这样的悬念

 aSubscription_instance = this.aSubscription$.subscribe(() => {
      /// Code here
    });

然后在ngOnDestroy()中写入

aSubscription_instance && aSubscription_instance.unsubscribe()

Answer 2

TBH这些模式都不是好的。这是最好的方法：

private unsubscribe$: Subject<any> = new Subject()

ngOnInit() {
  this.myService.pipe(takeUntil(this.unsubscribe$)).subscribe()
}

ngOnDestroy() {
  this.unsubscribe$.next()
  this.unsubscribe$.complete()
}

注意：.pipe(takeUntil(this.unsubscribe$))会取消订阅--只需为每个子模板代码添加此内容。使用这种方法，你的问题就会消失。