Nativescript + Angular，如何到达嵌套页面路由器出口中的子路由？

Question

我想在 NS + Angular 7 应用程序中实现选项卡视图导航。

这是我当前的设置：

应用程序路由.module.ts：

...

const routes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'tabs', loadChildren: '~/app/tabs/tabs.module#TabsModule'; }
];

...

tabs.module.ts：

...
NativeScriptRouterModule.forChild([
            {   path: 'def',
                component: TabsComponent,
                children: [
                  {
                      path: 'market',
                      outlet: 'market',
                      component: NSEmptyOutletComponent,
                      loadChildren: '~/app/market/market.module#MarketModule'
                  },
                  {
                      path: 'list',
                      outlet: 'list',
                      component: NSEmptyOutletComponent,
                      loadChildren: '~/app/list/list.module#ListModule'
                  },
                  {
                      path: 'search',
                      outlet: 'search',
                      component: NSEmptyOutletComponent,
                      loadChildren: '~/app/search/search.module#SearchModule'
                  },
                  {
                      path: 'insight',
                      outlet: 'insight',
                      component: NSEmptyOutletComponent,
                      loadChildren: '~/app/insights/insights.module#InsightsModule'
                  },
                  {
                      path: 'explore',
                      outlet: 'explore',
                      component: NSEmptyOutletComponent,
                      loadChildren: '~/app/explore/explore.module#ExploreModule'
                  }
            ]}
          ])
...

最后是 5 个路由模块之一，让我们使用 list-routing.module.ts：

...
const routes: Routes = [
    { path: '', redirectTo: 'list' },
    { path: 'list', component: ListComponent },
    { path: 'all', component: ListListComponent }
]
...

我想我很困惑，因为只有在您通过登录屏幕后才会出现选项卡。成功登录后，我正在做：

this.router.navigate(['tabs/def'], {
                        transition: {
                          name: 'fade',
                          duration: 100,
                          curve: 'linear'
                        },
                        clearHistory: true
                    }

这确实让我进入了市场，显示我的“主”屏幕。然后，如果我单击其中一个选项卡，则使用：

tabs.component.html：

<TabView class="fal" style="font-size: 20; padding: 3;" >
    <page-router-outlet *tabItem="{title: 'home'}" name="market"></page-router-outlet>
    <page-router-outlet *tabItem="{title: 'clipboard-list'}" name="list"></page-router-outlet>
    <page-router-outlet *tabItem="{title: 'search'}" name="search"></page-router-outlet>
    <page-router-outlet *tabItem="{title: 'lightbulb'}" name="explore"></page-router-outlet>
    <page-router-outlet *tabItem="{title: 'newspaper'}" name="insight"></page-router-outlet>
</TabView>

然后我被带到正确的出口。问题在于：列表组件可以正常加载，但是一旦我单击其中一个列表，进入 ListListComponent，它就会告诉我：

Error: Cannot match any routes. URL Segment: 'tabs/def'

我设置最后一个导航的方式是：

this.router.navigate( [ { outlets: { list: [ '/all' ] } }], { relativeTo: this.route })

我尝试了几种传递“tabs/def/all”或“tabs/def” URL 的组合，但没有成功。据我了解，我在开始时传递了一个 URL，但现在我是嵌套的，我应该只穿过插座。那么我的语法在最后一个 router.navigate 上是否已经偏离了？

非常感谢你的帮助！！

Answer 1

弄清楚了！您不需要在功能模块路由中指定outlet。对于发现此内容的其他人：

功能路由模块：

const routes: Routes = [
    {   path: '',
        component: ListComponent,
        children: [
            {
                path: '',
                children: [
                    {   path: '', redirectTo: 'all' },
                    {   path: 'all', component: ListListComponent },
                    {   path: 'group', component: ListgroupComponent },
                ]
            }
        ]
    }
];

列表.组件：

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

从 ListListComp -> ListgroupComp 导航（通过点击元素触发）：

this.router.navigate([ '../group' ], { relativeTo: this.route }