angular2-nativescript nested component page events

Question

I've set up my routing as follows:

const pages = [
    {
        path: "",
        component: BaseComponent,
        children: [
            { path: "scan", component: ScanComponent }
        ]
    }
];

So for example, if you go to /scan, it involves BaseComponent and ScanComponent.

The BaseComponent contains a <router-outlet></router-outlet> which renders the contents of the ScanComponent.

This all works fine, However:

In ScanComponent I have the following:

constructor(private page: Page) {
    this.page.on('navigatedTo', () => console.log('navigatedTo'));
}

And this event is never called.

If I remove the line component: BaseComponent from the parent route, the event is called, but that of course breaks other things.

How can I make sure this event is always called, regardless of whether there's a parent component or not?

This is a NativeScript application where the root component contains <page-router-outlet></page-router-outlet>

Bart van den Burg Bart van den Burg · Accepted Answer · 2017-08-30T19:18:33

Alright, I figured it out... since "page" is a nativescript concept, its events are only applied if the route is loaded into page-router-outlet, also a NativeScript concept. It only makes sense.

After searching Google for hours, why do I always figure out the answer right after posting to StackOverflow!? *sigh* I guess it's some sort of rubber duck programming.

angular2-nativescript nested component page events

1 Answers