使用Tabview / BottomNavigation保留或删除BottomNavigation栏时如何区分布线

Question

这可能比NativeScript更具角度路由问题，但我的应用程序正在使用NativeScripts BottomNavigation组件。从该组件的选项卡导航到子组件时，它始终将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时如何区分？

Answer 1

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

Answer 2

我们还必须克服这个问题，我们编写了自己的标签服务，要求更改标签等。这还包括隐藏某些标签和页面底部导航的逻辑。这是相关代码：

this.navBarStrip.visibility = 'collapse';

其中navBarStrip是底部导航栏的tabstrip部分上的Viewchild引用。因此，在加载底部导航时，我们在服务中设置了引用。从现在开始，我们在相关页面中将其称为tabService.hideTabs()。我们发现很难在正确的时间调用它，因此感觉和看起来很自然。请尝试在新页面中隐藏标签的“已加载”事件。另外，您将需要showTabs（）方法来还原可见性更改：

this.navBarStrip.visibility = 'visible';

你去。这应该够了吧。