Nativescript-angular: Angular/OnDestroy - How to detect page leaving navigation event?

[morzyns]

OnDestroy doesn't work for angular navigation lifecycle hooks. That's fine, but i still need to detect the page leaving event.
What's the best way to do that?

[anuragd7]

Try the page unloaded event.

On 20 Oct 2017 5:10 p.m., "morzyns" [e-mail] wrote:

OnDestroy doesn't work for angular navigation lifecycle hooks. That's fine,
but i still need to detect the page leaving event.
What's the best way to do that?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/NativeScript/nativescript-angular/issues/1049, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AE2PtppY8ySP0b2Bt6_KuK3FTvN2cyDwks5suIahgaJpZM4QAjO8
.

[jfturcot]

Here is how I handle it:

constructor(private page: Page) {}

ngOnInit(): void {
  this.page.on('navigatingTo', (data) => {
    // run init code
    // (note: this will run when you either move forward or back to this page)
  }

  this.page.on('navigatingFrom', (data) => {
    // run destroy code
    // (note: this will run when you either move forward to a new page or back to the previous page)
  }
}

You could probably try this in the constructor also if you do not need an OnInit in the controller where you need this, but I usually add this to the OnInit.

[morzyns]

Thanks @jfturcot, i tried similar approach but with a router navigatingFrom and navigatingTo events. in my case, navigatingFrom & navigatingTo were hit every time simultaneously.

[tsonevn]

Hi @morzyns,
Did you try the solution provided by @anuragd7 to handle page unloaded event? For example:

this.page.on('unloaded ', (data) => {
    // run init code
    // (note: this will run when you either move forward or back to this page)
  }

[abhayastudios]

A bit late to the party, but since the OP is asking about Angular, I wanted to point out that if you are not using page navigation, the page navigation events mentioned above will of course not fire. In that case you you can listen to Angular's navigation events like below:

import { NavigationStart, Router } from '@angular/router';

  private routeSub:any;  // subscription to route observer

  public ngOnInit() {
    /* 
       Register to Angular navigation events to detect navigating away (so we can save changed settings for example)
    */
    this.routeSub = this.router.events.subscribe((event) => {
      if (event instanceof NavigationStart) {
        // save your data
      }
    });
  }

  public ngOnDestroy() {
    this.routeSub.unsubscribe();
  }

[BasyaLipman]

@abhayastudios - in the code you posted here, you are unsubscribing in ngOnDestroy. NgOnDestroy won't necessarily fire when you navigate away from the angular component, since NativeScript caches the component.

This means that the subscription will exist beyond the point when you navigate away from the component and you'll be executing the subscription callback on NavigationStart events of other components.

[CoreyCole]

where do you import { Page } from ? Sorry I'm new to NativeScript and I see here that it is ui/page but importing from nativescript-angular/ui/page doesn't work

EDIT: ah, for anyone else new around here arriving from google

import { Page } from 'ui/page';

[abhayastudios]

@CoreyCole

import { Page } from 'tns-core-modules/ui/page';

[jpierront]

Use

page.on(Page.navigatingFromEvent, () => {
    this.ngOnDestroy(); // Replace by what you want
});

And not Page.unloadedEvent because Page.unloadedEvent is also triggered when the application goes into background.

[joelau71]

I use angular 7 lifecycle hooks:

import { Component, OnDestroy } from '@angular/core';
export class SampleComponent implements OnDestroy {
  ngOnDestroy() {
    // code here
  }

}

[Stanteq]

I wrote an article about this. I solved it in generic way with the decorator.

[jpierront]

@joelau71 Unfortunately ngOnDestroy isn't called when you navigate to a new page

[jpierront]

@Stanteq Nice solution! This will avoid some duplication, especially with a NativeScript + Web application. It's ugly to inject the injector, but if we have no choice...

[jpierront]

Instead of injecting the injector in each page, we could store the injector in a static var ... It's ugly too but it's ugly in only one place! https://stackoverflow.com/questions/39409328/storing-injector-instance-for-use-in-components

[juniorschen]

@Stanteq
This solution would not work for modals

[Stanteq]

@Stanteq
This solution would not work for modals

@juniorschen, As I know the modals works well without this workaround.

[edusperoni]

@juniorschen how so? ngOnDestroy is called in modals without navigation and page navigation works normally with named outlets

[juniorschen]

@edusperoni I didn't know that in modals destroy was usually called hehe

[juniorschen]

@edusperoni
In navigation modals, will I have the page instance to register for the event?

[edusperoni]

@juniorschen if you don't have a Page, ngOnDestroy is called normally, so you don't need this workaround at all

[juniorschen]

@edusperoni
Ah vlw irmão, ajudou muito a explicação