ngOnDestroy is called when loading the page for the first time

问题

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

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.

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.

So I added if condition to remove the error message.

This is the creation of the subscription.

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

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.

回答1:

What is your version of rxjs?

If rx is v5, ok you can use .unsubscribe() on a subscriber but if is it v4 you have to use .dispose().

This seems to be the only problem.

回答2:

Do you redirect to different page in your constructor?

Based on these two pages it's the only possibility when onDestroy is called without onInit(). 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

回答3:

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:

constructor
ngOnDestroy
constructor
ngOnInit

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>

(inspired by: https://stackoverflow.com/a/51725607/7662651)

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>

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>.

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

来源：https://stackoverflow.com/questions/55575184/ngondestroy-is-called-when-loading-the-page-for-the-first-time

标签

angular

lifecycle