NativeScript-Angular嵌套Page-Router-Outlet实现带返回路由需求

我完全明白你想要的效果——这种嵌套路由在NativeScript-Angular里是完全可以实现的，核心就是利用Page-Router-Outlet创建页面内的子路由栈，同时保留主导航栏的顶层路由逻辑。下面我一步步给你拆解实现方案：

1. 配置双层路由结构 #

首先在app-routing.module.ts里定义顶层主路由和子路由：顶层对应导航栏切换的页面，子路由对应ListView页面内的详情页。

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "@nativescript/angular";

// 导入你的组件
import { HomeComponent } from "./home/home.component";
import { ContactsComponent } from "./contacts/contacts.component";
import { ChatDetailComponent } from "./chat-detail/chat-detail.component";

const routes: Routes = [
    { path: "", redirectTo: "/home", pathMatch: "full" },
    // 顶层主路由（对应导航栏切换的页面）
    { path: "home", component: HomeComponent },
    // 联系人页面作为父路由，包含子路由
    {
        path: "contacts",
        component: ContactsComponent,
        // 子路由将渲染在ContactsComponent的Page-Router-Outlet中
        children: [
            { path: "chat/:id", component: ChatDetailComponent }
        ]
    }
];

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

2. 主页面的导航栏布局 #

假设用BottomNavigation作为主导航栏（也可以用ActionBar菜单按钮），在app.component.html中设置顶层导航：

<ActionBar title="My App" class="action-bar"></ActionBar>

<BottomNavigation>
    <TabStrip>
        <TabStripItem>
            <Label text="首页"></Label>
            <Image src="font://&#xf015;" class="fas"></Image>
        </TabStripItem>
        <TabStripItem>
            <Label text="联系人"></Label>
            <Image src="font://&#xf0c0;" class="fas"></Image>
        </TabStripItem>
    </TabStrip>

    <TabContentItem>
        <page-router-outlet name="home"></page-router-outlet>
    </TabContentItem>
    <TabContentItem>
        <page-router-outlet name="contacts"></page-router-outlet>
    </TabContentItem>
</BottomNavigation>

3. 联系人页面（带ListView）的布局 #

在contacts.component.html中，我们需要放置Page-Router-Outlet加载子页面，同时动态控制ListView和返回按钮的显示：

<ActionBar>
    <Label text="联系人" class="action-bar-title"></Label>
    <!-- 子路由激活时显示返回按钮 -->
    <ActionItem *ngIf="hasChildRoute" text="返回" ios.position="left" (tap)="goBack()"></ActionItem>
</ActionBar>

<!-- 无子女路由时显示联系人列表 -->
<ListView *ngIf="!hasChildRoute" [items]="contacts" (itemTap)="onContactTap($event)">
    <ng-template let-contact="item">
        <StackLayout padding="10">
            <Label [text]="contact.name" font-size="18"></Label>
            <Label [text]="contact.lastMessage" text-wrap="true" font-size="14" color="#666"></Label>
        </StackLayout>
    </ng-template>
</ListView>

<!-- 子路由页面将渲染在此处 -->
<page-router-outlet></page-router-outlet>

4. 联系人组件的逻辑处理 #

在contacts.component.ts中监听路由变化，实现导航和返回功能：

import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "@nativescript/angular";
import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
import { filter } from "rxjs/operators";

@Component({
    selector: "Contacts",
    templateUrl: "./contacts.component.html"
})
export class ContactsComponent implements OnInit {
    contacts = [
        { id: 1, name: "张三", lastMessage: "今天一起吃饭吗？" },
        { id: 2, name: "李四", lastMessage: "项目文档已经发你邮箱了" }
    ];
    hasChildRoute = false;

    constructor(
        private router: Router,
        private activatedRoute: ActivatedRoute,
        private routerExtensions: RouterExtensions
    ) { }

    ngOnInit(): void {
        // 监听路由变化，判断是否有子路由激活
        this.router.events.pipe(
            filter(event => event instanceof NavigationEnd)
        ).subscribe(() => {
            this.hasChildRoute = this.activatedRoute.firstChild !== null;
        });
    }

    // 点击联系人跳转到详情页
    onContactTap(event: any) {
        const contact = event.item;
        this.routerExtensions.navigate(["chat", contact.id], {
            relativeTo: this.activatedRoute,
            // 启用原生风格的页面转场动画
            transition: {
                name: "slide",
                duration: 300,
                curve: "ease"
            }
        });
    }

    // 返回上一页
    goBack() {
        this.routerExtensions.back();
    }
}

5. 详情页面的布局与逻辑 #

chat-detail.component.html展示详情内容：

<ActionBar>
    <Label [text]="contactName" class="action-bar-title"></Label>
</ActionBar>

<StackLayout padding="20">
    <Label text="对话详情页面" font-size="20" margin-bottom="20"></Label>
    <Label [text]="'联系人ID：' + contactId"></Label>
    <!-- 这里可以添加聊天记录等自定义内容 -->
</StackLayout>

chat-detail.component.ts获取路由参数：

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";

@Component({
    selector: "ChatDetail",
    templateUrl: "./chat-detail.component.html"
})
export class ChatDetailComponent implements OnInit {
    contactId: number;
    contactName: string;

    constructor(private activatedRoute: ActivatedRoute) { }

    ngOnInit(): void {
        // 从路由参数中获取联系人ID
        this.contactId = +this.activatedRoute.snapshot.params["id"];
        // 模拟根据ID获取联系人名称
        this.contactName = this.contactId === 1 ? "张三" : "李四";
    }
}

关键要点说明 #

• Page-Router-Outlet是NativeScript特有的组件，它会创建独立的页面栈，因此子路由导航会保留历史记录，返回按钮可以正常工作。
• 父组件通过监听路由变化，动态控制ListView和返回按钮的显示/隐藏，确保进入详情页时隐藏列表，返回时重新显示。
• 使用RouterExtensions的navigate方法并指定relativeTo: this.activatedRoute，确保导航是相对于当前父路由的子路由。

这样实现后，你的应用就会和WhatsApp的导航逻辑一致：通过主导航栏切换到联系人页面，点击联系人进入详情页（带滑动转场和返回按钮），返回后回到联系人列表，完全符合你的需求。

内容的提问来源于stack exchange，提问作者AlvaroCryptogram