首次加载页面时会调用ngOnDestroy [英] ngOnDestroy is called when loading the page for the first time

问题描述

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

When I load the page first time, on some pages it shows unsubscribe error in ngOnDestroy as I am unsubscribing subscribes in it.

我不确定为什么在组件的初始位置调用ngOnDestroy.

I am not sure why ngOnDestroy is called at the init of the component.

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

This is the error what I see when the page is first loaded.

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

I thought this was some issue from angular2-multiselect-dropdown but in some other component, its own ngOnDestory is called as well and says subscription to unsubscribe is not defined.

因此我添加了if条件以删除错误消息.

So I added if condition to remove the error message.

这是订阅的创建.

实际上，我认为在定义可观察对象时没有其他问题.

Actually I don't think it has any other problem in defining the observable.

那么这是角度组件生命周期的问题，还是来自angular2-multiselect-dropdown的问题?

So is this a problem with angular component lifecycle or possibly an issue from angular2-multiselect-dropdown?

我之前没有看到此错误，也不确定自己做错了什么. 谁能遇到类似的问题或对此提供帮助? 预先感谢.

I didn't see this error before and not sure what I did wrong. Can anyone had similar issue or help me on this? Thanks in advance.

推荐答案

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

I had a similar issue with components that i have used with routes. If i added logging to the constructor, ngOnInit and ngOnDestroy the output looked like the following:

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

在我的情况下，问题是我如何使用<router-outlet>.简而言之，我的模板如下所示:

In my case the problem was how i used <router-outlet>. Simplyfied my template looked like this:

<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>.与此类似:

I changed it so that i have only one <router-outlet> component without <ng-template> in my template. Similar to this:

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

<router-outlet></router-outlet>

---

此行为的原因是控制使用哪个<router-outlet>的值的更改和异步身份验证保护的不幸组合.在我的情况下，身份验证保护人员正在等待登录初始化，并且初始化的登录会切换<router-outlet>.

---

The reason for this behavior is a unlucky combination of a change of the value that controlls which <router-outlet> is used and a async auth guard. In my case the auth guard is waiting that the login is initialized and the initialized login switches the <router-outlet>.

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

Here is an example that reproduces the unwanted behavior: https://stackblitz.com/edit/angular-27vrnz

这篇关于首次加载页面时会调用ngOnDestroy的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！