These are chat archives for jgamedev/nativescript

4th
Mar 2017
Demetrio Filocamo
@demetrio812
Mar 04 2017 23:01

Hello guys, I'm trying to use angular 2 named secondary routes with a TabView, but the content it's not showing, any idea?

I've got a AppComponent with a <page-router-outlet></page-router-outlet> that redirects to a HomeComponent that has 2 children and 2 named router-outlet.

These are my routes:

const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    {
        path: "home",
        component: HomeComponent,
        children: [
            { path: "featured-items", component: FeaturedItemsComponent, outlet: "featured-items" },
            { path: "map", component: MapComponent, outlet: "map" }
        ]
    }
];

And this is my home.component.html:

<TabView (selectedIndexChanged)="onHomeSelectedIndexChanged($event)" [selectedIndex]="homeSelectedIndex"
         selectedColor="#1083BF">
    <StackLayout *tabItem="{title: 'Featured'}">
        <router-outlet name="featured-items"></router-outlet>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Map'}">
        <router-outlet name="map"></router-outlet>
    </StackLayout>
</TabView>

What am I doing wrong?

Cheers,
Dem