如何在 NativeScript Angular 的 BottomNavigation 中显示带有模块的子路由

Question

我正在尝试将子模块（即 HomeModule）加载到 BottomNavigation page-router-outlet 中，并尝试使用 home.component.html 的 router-outlet 作为 orderComponent 的父级。

所以总结：

1. 通过 page-router-outlet 将 page.module 延迟加载到应用组件中
2. 通过 BottomNavigation Page-router-outlet 将 homeModule 延迟加载到页面组件中
3. 最后尝试通过角度路由器出口将 OrderComponent 加载到 HomeComponent 中

app.component.html

<page-router-outlet></page-router-outlet>

app-routing.component.ts

const routes: Routes = [
    { path: "", redirectTo: "/pages/default", pathMatch: "full" },
    { path: "login", component: LoginComponent },
    { 
        path: "pages",
        loadChildren: () => import('./pages/pages.module')
        .then(m => m.PagesModule) 
    },
];

page-router.module.ts

const routes: Routes = [
    { path: "default", component: PagesComponent, children: [
            { 
                path: "home",
                loadChildren: () => import('./home/home.module').then( m => m.HomeModule),
                component: NSEmptyOutletComponent,
                outlet: 'homeOutlet'
            },
            { 
                path: "account",
                loadChildren: () => import('./account/account.module').then( m => m.AccountModule),
                component: NSEmptyOutletComponent,
                outlet: 'accountOutlet'
            },
        ]
    },
    
];

pages.component.html

<TabStrip>
    <TabStripItem>
        <Label text="Home"></Label>
        <Image src="font://&#xf015;" class="fas"></Image>
    </TabStripItem>

    <TabStripItem class="special">
        <Label text="Account"></Label>
        <Image src="font://&#xf007;" class="fas"></Image>
    </TabStripItem>
</TabStrip>

<TabContentItem>
    <GridLayout>
        <Page-router-outlet name="homeOutlet"></Page-router-outlet>
    </GridLayout>
</TabContentItem>
<TabContentItem>
    <GridLayout>
        <Page-router-outlet name="accountOutlet"></Page-router-outlet>
    </GridLayout>
</TabContentItem>

home-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "@nativescript/angular";
import { HomeComponent } from "./home.component";
import { OrdersComponent } from "./orders/orders.component";

const routes: Routes = [
    { path: '', component: HomeComponent, children: [
        { path: 'orders', component: OrdersComponent}
    ]}
];

@NgModule({
    imports: [NativeScriptRouterModule.forChild(routes)],
    exports: [NativeScriptRouterModule]
})
export class HomeRoutingModule { }

home.component.html

<StackLayout>
    <Label text="Home"></Label>
    <Button text="Tap me" (tap)="tapMe()"></Button>

    <router-outlet></router-outlet>
</StackLayout>

Answer 1

我认为您还需要在您的pages.component.ts ngOnInit() 中执行类似的操作：

this._routerExtensions.navigate(
            [{
                outlets: {
                    homeOutlet: ["home"],
                    accountOutlet: ["account"]
                }
            }],
            { relativeTo: this._activatedRoute }
        );

我有一个和你类似的结构化应用程序，这是我看到的唯一区别。

如果选项卡显示为选中但页面为白色，则可能只是路由问题。

注意嵌套路由，因为 navigate() 不使用相对路径，但 routerLink 使用相对路径。