angular - 第一次加载页面时调用 ngOnDestroy

Question

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

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





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

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

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


这是订阅的创建。




实际上，我认为在定义 observable 方面没有任何其他问题。

那么这是 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>使用和异步身份验证保护。在我的情况下，auth 守卫正在等待登录被初始化并且初始化的登录切换 <router-outlet> .

这是一个重现不需要的行为的示例:
https://stackblitz.com/edit/angular-27vrnz