第一次加载页面时调用 ngOnDestroy

Question

当我第一次加载页面时，在某些页面上它会在 ngOnDestroy 中显示取消订阅错误，因为我正在取消订阅其中的订阅。

我不确定为什么在组件的初始化时调用 ngOnDestroy。

这是我第一次加载页面时看到的错误。

我认为这是 angular2-multiselect-dropdown 的一些问题，但在其他一些组件中，它自己的 ngOnDestory 也被调用，并表示未定义订阅取消订阅。

所以我添加了 if 条件来删除错误消息。

这是订阅的创建。

其实我认为定义 observable 没有其他问题。

那么这是角度组件生命周期的问题还是可能是 angular2-multiselect-dropdown 的问题？

我之前没有看到这个错误，也不知道我做错了什么。 任何人都可以有类似的问题或帮助我吗？ 提前致谢。

Answer 1

我在路由中使用过的组件也有类似的问题。如果我将日志记录添加到构造函数中，ngOnInit 和 ngOnDestroy 输出如下所示：

• 构造函数
• ngOnDestroy
• 构造函数
• ngOnInit

就我而言，问题是我如何使用<router-outlet>。简单地说我的模板看起来像这样：

<div *ngIf="hasLayout()">
    <app-navigation></app-navigation>
    <ng-container *ngTemplateOutlet="routerOutlet"></ng-container>
</div>

<div *ngIf="!hasLayout()">
    <ng-container *ngTemplateOutlet="routerOutlet"></ng-container>
</div>

<ng-template #routerOutlet>
    <router-outlet></router-outlet>
</ng-template>

（灵感来自：https://stackoverflow.com/a/51725607/7662651）

我对其进行了更改，因此我的模板中只有一个 <router-outlet> 组件而没有 <ng-template>。类似这样：

<div *ngIf="hasLayout()">
    <app-navigation></app-navigation>
</div>

<router-outlet></router-outlet>

---

这种行为的原因是控制使用 <router-outlet> 的值的变化和异步身份验证保护的不幸组合。在我的例子中，auth 守卫正在等待登录被初始化并且初始化的登录切换<router-outlet>。

下面是一个重现不良行为的示例： https://stackblitz.com/edit/angular-27vrnz

Answer 2

你的 rxjs 是什么版本的？

如果 rx 是 v5，你可以在订阅者上使用 .unsubscribe()，但如果是 v4，你必须使用 .dispose()。

这似乎是唯一的问题。

Answer 3

您是否在构造函数中重定向到不同的页面？

根据这两个页面，只有在没有 onInit() 的情况下调用 onDestroy 时才有可能。 Angular 4 - Can OnDestroy be run without the OnInit ever being triggered?

https://www.bennadel.com/blog/3356-ngoninit-may-not-get-called-before-ngondestroy-is-called-in-angular-4-4-6.htm