在Tabs设置中从1个子模块到另一个的本机角向路由

Question

我在我的Nativescript Angular项目中为选项卡使用<page-router-outlet></page-router-outlet>和<BottomNavigation></BottomNavigation>设置，并且从一个子选项卡路线导航到另一个子选项卡路线时遇到麻烦。

这里是app-routing.module.ts：

const routes: Routes = [
    { path: '', redirectTo: '/auth', pathMatch: 'full' },
    { path: 'auth', component: AuthComponent },
    { path: 'individual-tasks', component: SpecificTasksComponent },
    {
        path: 'tabs',
        component: TabsComponent,
        children: [
            {
                path: 'feed',
                loadChildren: '~/app/pages/feed/feed.module#FeedModule',
                component: NSEmptyOutletComponent,
                outlet: 'feedTab'
            },
            {
                path: 'notification',
                loadChildren: '~/app/pages/notification/notification.module#NotificationModule',
                component: NSEmptyOutletComponent,
                outlet: 'notificationTab'
            },
            {
                path: 'create',
                loadChildren: '~/app/pages/create/create.module#CreateModule',
                component: NSEmptyOutletComponent,
                outlet: 'createTab'
            },
            {
                path: 'profile',
                loadChildren: '~/app/pages/profile/profile.module#ProfileModule',
                component: NSEmptyOutletComponent,
                outlet: 'profileTab'
            }
        ]
    }
];

而且我目前正在尝试从创建标签模块中导航到供稿标签模块。这是create-routing.module.ts：

const routes: Routes = [
    { path: '', redirectTo: 'create', pathMatch: 'full' },
    { path: 'create', component: CreateComponent },
    { path: 'create-tasks', component: CreateTasksComponent },
    { path: 'create-preview', component: CreatePreviewComponent }
];

因此，如果我目前在create-preview路线之内，如何导航回到app-routing.module.ts中的“制表符/提要”出口？

我一直在尝试：

        this.router.navigate([
            '../tabs', {
                outlets: { feedTab: ['feed'] }, relativeTo: this.activatedRoute
            }
        ]);

但是即使我明确地将导航定位到feedTab，它仍然导航到起始出口（配置文件）而不是feed出口。就像说的出口完全被忽略了...任何想法???

Answer 1

尝试一下：

您需要从this.activatedRoute中删除navigate()，这是在当前提供的路由路径之前分配当前路由。

 this.router.navigate(['../tabs/feed', {
       outlets: {  primary: ['feed'], feedTab: ['feed'] }
    }
 ])

您可以阅读有关outlets here的更多信息，并关注此博客以获取更多outlets here。

希望这会有所帮助..：）

Answer 2

我不认为路由器使您能够切换选项卡。您将必须更新details的selectedIndex，然后导航至所需的特定标签。

要从子组件更新BottomNavigation，请使用带有selectedIndex的服务。从父组件听主题，从子组件更新值。