Question

在特定的路由中，我正在加载一个订阅了router.events的组件，以检测该组件中的任何路由更改（例如queryparams）。当我转到加载不同组件的不同路由时，即使在加载新组件之前在第一个组件上调用了ngOnDestroy生命周期钩子，仍然会调用第一个组件的router.event。我的问题是因为调用ngOnDestroy意味着第一个组件应该销毁，然后为什么在每次路由更改时仍会调用订阅的router.events。

 this.router.events.subscribe((event: any) => {
        if (event instanceof NavigationEnd) {
            this.applicationItemIdChange = this.route.snapshot.params['id'];
            if (this.applicationItemId && this.applicationItemIdChange && this.applicationItemIdChange !== this.applicationItemId) {
                this.ngOnInit();
            }

        }
    });

Answer 1

那是因为程序中存在内存泄漏。 subscription至this.router.events几乎是一个永无止境的订阅。因此，一旦卸下组件，就应该从中明确unsubscribe。

this.subscription = this.router.events.subscribe((event: any) => {
  if (event instanceof NavigationEnd) {
    this.applicationItemIdChange = this.route.snapshot.params['id'];
    if (this.applicationItemId && this.applicationItemIdChange && this.applicationItemIdChange !== this.applicationItemId) {
      this.ngOnInit();
    }
  }
});

在这里，我们将Subscription存储在一个属性中。

然后在ngOnDestroy中输入：

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

我们从unsubscribe手动Subscription

Answer 2

这样做的原因是，尽管您的组件已被破坏，但您仍在订阅事件。

因此，您需要保留对subscription和unsubscribe的引用（如@siddAjmera的回答）

或者您可以使用此模式取消订阅多个订阅而无需定义多个变量。

class mycomp implements OnDestroy {

  private unsubscribeAll : Subject<Any> = new Subject<any>();

  ngOnDestroy() {
     this.unsubscribeAll.next();
     this.unsubscribeAll.complete();
  }

  foo() {
     this.router.events
     .pipe(
        takeUntil(this.unsubscribeAll)
     )
     .subscribe(...)    


     observable1
     .pipe(
        takeUntil(this.unsubscribeAll)
     )
     .subscribe(...)

  }

  bar() {
     observable2
     .pipe(
        takeUntil(this.unsubscribeAll)
     )
     .subscribe(...)
  }

}

一次订阅路由器更改事件时，角度组件是否会销毁？

2 个答案: