Navigate to router-outlet inside another router-outlet


#1

I have a tab layout which loads a home component into an router-outlet inside the home tab. Inside the home component I have another set of router-outlets (homechild1 and homechild2) inside homechild2 I want to switch between 2 components (chat and users) but I’m having trouble with the navigation between chat and users.

app.routing.ts

const routes: Routes = [
    ....
    { path: "tabs", component: TabsComponent, children: [
        { path: "tabs", children: [
            { path: "home", component: HomeComponent, outlet: "home", children: [
                { path: "", component: MapComponent, outlet: "homechild1" },
                { path: "", component: ChatComponent, outlet: "homechild2" },
                { path: "chat", component: ChatComponent, outlet: "homechild2" },
                { path: "users", component: UsersComponent, outlet: "homechild2" },
            ] },
            { path: "about", component: AboutComponent, outlet: "home" },
            { path: "browse", component: BrowseComponent, outlet: "home" },
            { path: "products", component: ProductsComponent, outlet: "products" },
            { path: "product/:id", component: ProductComponent, outlet: "products" }
        ] }
    ] }
];

tabs.html

....
<!-- TAB 1: Home --> 
<StackLayout class="home-tab" *tabItem="{title: 'Home', iconSource: getIconSource('home')}" orientation="vertical" (loaded)="homeTabLoaded($event)" (unloaded)="homeTabUnloaded($event)">

        <StackLayout *ngIf="tabState.activeTab === 0">

            <router-outlet name="home"></router-outlet> 

        </StackLayout>

</StackLayout>
....

home.component.html

<StackLayout class="home-child-a">
        
        <router-outlet name="homechild1"></router-outlet>

</StackLayout>


<StackLayout class="home-child-b" [row]="isTablet ? '0' : '1'" [col]="isTablet ? '1' : '0'">
        
        <GridLayout rows="auto" columns="*,*">
            <Button class="btn btn-primary" row="0" col="0" text="Chat" (tap)="goToChild('chat')"></Button>
            <Button class="btn btn-primary" row="0" col="1" text="Users" (tap)="goToChild('users')"></Button>          
        </GridLayout>

        <router-outlet name="homechild2"></router-outlet>

</StackLayout>

home.component.ts

goToChild(page) {

		if (page === 'users') {
			this._ngRouter.navigate([ '/tabs/tabs', 'home', { outlets: { "homechild2": ["users"] } } ]);
		}

		if (page === 'chat') {
			this._ngRouter.navigate([ '/tabs/tabs', 'home', { outlets: { "homechild2": ["chat"] } } ]);
		}
		
	}

The routes up to home tab looks like: /tabs/tabs/(home:home//products:products)

When goToChild(‘users’) is clicked: /tabs/tabs/(home/(homechild2:users)//home:home//products:products)

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘tabs/tabs’

https://github.com/thegermin8er/nsngTabs2

How can I navigate between those nested child routes?


#2

Found how to.

goToChild(page) {

    if (page === 'users') {
        this._ngRouter.navigate([ { outlets: { "homechild2": ["users"] } } ], { relativeTo: this._ngRoute });
    }

    if (page === 'chat') {
        this._ngRouter.navigate([ { outlets: { "homechild2": ["chat"] } } ], { relativeTo: this._ngRoute });
    }
		
}