时间戳

首页 > 解决方案 > 使用 Tabview/BottomNavigation 保留或删除 BottomNavigation 栏时如何区分路由

angular - 使用 Tabview/BottomNavigation 保留或删除 BottomNavigation 栏时如何区分路由

问题描述

这可能比 NativeScript 更像是一个 Angular Routing 问题，但我的应用程序使用的是 NativeScripts BottomNavigation 组件。当从该组件中的选项卡导航到子组件时，它始终将底部导航选项卡保留在屏幕底部。我想让导航到底部没有标签的完全“新”页面成为可能

在我的选项卡路由模块中，我有：

const routes: Routes =[
    { path: '', redirectTo: '/default', pathMatch: 'full' },
    {

        path: "default", component: TabsComponent,  children: [
            {
                path: "profile",
                component: NSEmptyOutletComponent,
                loadChildren: () => import("~/app/profile/profile.module").then((m) => m.ProfileModule),
                outlet: "profileTab"
            },
            {
                path: "home",
                component: NSEmptyOutletComponent,
                loadChildren: () => import("~/app/home/home.module").then((m) => m.HomeModule),
                outlet: "homeTab"
            }

然后在我的家庭路由模块中：

const routes: Routes = [
    { path: "", redirectTo: "default" },
    { path: "default", component: HomeComponent },
    { path: "next", component: HomeNextComponent }
];

因此，当我在 home.component 中并尝试导航到“HomeNextComponent”时，我使用此导航：

    this.router.navigate(['../next'], {
        transition: { name: 'slideLeft', duration: 250 },
        relativeTo: this.activatedRoute
    });

它将我导航到 HomeNextComponent，但它保留了 BottomNavigation，当我想“保留”或“删除”BottomNavigation 时如何区分？

标签： angularnativescriptangular2-routingangular2-nativescript

解决方案

我认为问题出在您的默认应用程序组件上。检查默认应用程序组件的 html 代码，您可能正在共享相同的底部 html，只是更改了里面的内容<router-outlet></router-outlet>。

推荐阅读