ngOnDestroy 在第一次加载页面时被调用

Question

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

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

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

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

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

这是订阅的创建。

实际上我认为它在定义可观察量方面没有任何其他问题。

那么这是 Angular 组件生命周期的问题还是可能是 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>

的值的更改与异步身份验证防护的不幸组合。在我的例子中，身份验证守卫正在等待登录初始化，并且初始化的登录会切换

<router-outlet>

。

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

Answer 2

你的rxjs版本是什么？

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

这似乎是唯一的问题。

Answer 3

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

根据这两个页面，这是在没有 onInit() 的情况下调用 onDestroy 的唯一可能性。 Angular 4 - OnDestroy 可以在不触发 OnInit 的情况下运行吗？

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

Answer 4

以前遇到过这个问题，删除你的 .angular 文件并重新加载 ngserve