订阅在Angular中取消订阅问题

Question

我有一个Angular应用程序，其中包含大量事件挂钩，大量订阅等。

该应用在首次加载时功能正常，但是当我继续使用该应用程序时，它开始变得慢，实际上键入将有大约2到3秒。

我做的是我有一个订阅：subscription []，然后将所有subscribe s推向它，在ngondestroy，i只需退缩从所有订阅中。

对于事件，我使用fromevent。

我有一些输入将挂钩到键>键事件，有些输入不存在类型延迟问题，即使不存在键挂钩。

export class Destroy {
      static subscription(subscription: Subscription): void {
        if (!subscription || subscription.closed) return;
        subscription.unsubscribe();
        subscription = null;
      }
      static subscriptions(subscriptions: Subscription[]): void {
        if (!subscriptions) return;
        subscriptions.forEach(item => {
          if (!item) return;
          Destroy.subscription(item);
        });
      }
  }

@Component({...})
export class SomeComponent implements OnInit,OnDestroy{
   subscriptions:Subscription[];
   constructor(){
      this.subscriptions = [];
   }
   ngOnInit(){
      this.subscriptions.push(fromEvent('keydown',/*some inputs*/).subscribe(res=>{/**/}));
   }
   ngOnDestroy(){
      Destroy.subscriptions(this.subscriptions);
   }
}

这是我所能做的吗？我确实退订了所有订阅，但是为什么我的应用程序之后无法正常工作？

Answer 1

即使您销毁类似乎都应该工作。

无论如何，要缩小问题，您应该添加2 console.log：

static subscription(subscription: Subscription): void {
    if (!subscription || subscription.closed) return;
    subscription.unsubscribe();
    console.log('unsubscribed');
    subscription = null;
}

ngOnInit(){
    this.subscriptions.push(fromEvent('keydown',/*some inputs*/).subscribe(res=>{console.log('key down event')}));
}

一旦添加了这些问题，您就可以查看所有订阅是否取消订阅，而且订阅仍然保留，您应该看到”键入事件“记录了多次。

至于destoy类，我会这样做：

ngOnDestroy(){
    subscriptions.forEach(s => s.unsubscribe());
}

我从来没有这种方法有问题