NativeScript TabView Navigation

Question

I am creating an app starting from the NativeScript TabView template app (https://github.com/NativeScript/template-tab-navigation-ng), and I can't figure out how to programmatically navigate to a page within a page-router-outlet from AppComponent. Example:

export class AppComponent{

    constructor(private router: RouterExtensions, private currentRoute: ActivatedRoute) {
        // Use the component constructor to inject providers.
    }

    getIconSource(icon: string): string {
        const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";
        return iconPrefix + icon;
    }

    navigateToPage(): void {
        this.router.navigate(['../page'], { relativeTo: this.currentRoute });
    }
}

This works fine from within a page inside the page-router-outlet, but when I call it from AppComponent, I get a console error such as this:

Cannot match any routes. URL Segment: 'page'

My actual code is here: https://github.com/rchisholm/saint_stan

My actual full error is here, from the debugging console:

Unhandled Promise rejection: Cannot match any routes. URL Segment: 'novena-day/1' ; Zone: <root> ; Task: Promise.then ; Value: Error: Cannot match any routes. URL Segment: 'novena-day/1' Error: Cannot match any routes. URL Segment: 'novena-day/1'

My attempted navigation is inside of a LocalNotifications.addOnMessageReceivedCallback in OnInit in AppComponent.

This seems like it should be simple. I am a bit new at this, so any help would be greatly appreciated.

I am using the latest versions of NativeScript, TypeScript, and Angular.

Thanks!

Answer 1

This is how you navigate to some TabView tab. Your outlets have to be set in app.routing.ts file.

private navigateToFoo() {
    this.routerExtensions.navigate([
        '/YourTabRouting', { outlets: { fooOutlet: ['foo'] } }
    ])
}