CODEWITHSUNDEEP
nativescriptangular2-nativescriptnativescript-angular
rynop
rynop

Reputation: 53559

NativeScript Angular: How do I redirectTo child nested route?

I'm using NativeScript Angular, and can't figure out how to setup the default view to use a children nested route path.

The easiest way to convey what I'm trying to accomplish is to look at my playground here: https://play.nativescript.org/?template=play-ng&id=WvQnzu&v=581

Open up app/home/home-routing.module.ts and on line 9 you can see where I'm trying to re-direct the initial page view to load the first child component in the <router-outlet> defined in home.component.html

I can load the child component in the nested <router-outlet> by clicking a button OR by using the programatic this.routerExtensions.navigate() (see home.component.ts line 47)

What am I doing wrong? Why doesn't the initial load of the HomeComponent display the FirstComponent child in the nested <router-outlet>??

I just want to use this custom tab navigation, and load a component when the tab navigation item is clicked.

Extra credit: I see outlet used in routes as well as this funky /<route>(<outlet>:<route>) named outlet notation. Example: [modal-navigation-ng] e2e app1. Is this notation/mechanism documented anywhere? I kinda get what's going on but seems like some black-box/magic. I can't fully grasp the concept by simply looking at the e2e example app

Upvotes: 0

Views: 1107

Answers (1)

Manoj
Manoj

Reputation: 21908

Multiple levels of absolute redirect is not supported by Angular.

Source: https://github.com/angular/angular/issues/25254

An easy fix is to use relative redirect

app-routing

const routes: Routes = [
    { path: "home", loadChildren: "./home/home.module#HomeModule" },
    { path: "", redirectTo: "home", pathMatch: "full" }
];

home-routing

const routes: Routes = [
    {
        path: "", component: HomeComponent,
        children: [
            { path: 'first', component: FirstComponent },
            { path: 'second', component: SecondComponent },
            { path: '', redirectTo: 'first', pathMatch: 'full'}
        ]
    }
];

Upvotes: 1

Related Questions