我想在NS + Angular 7应用中实现Tabview导航。
这是我当前的设置:
app-routing.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>
然后我被带到正确的插座。问题出在这里:List Component可以很好地加载,但是一旦我单击自己的列表之一,就可以进入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上了吗?
非常感谢您的帮助!
答案 0 :(得分:0)
想通了!您无需在功能模块布线中指定插座。对于其他发现此问题的人:
功能路由模块:
const routes: Routes = [
{ path: '',
component: ListComponent,
children: [
{
path: '',
children: [
{ path: '', redirectTo: 'all' },
{ path: 'all', component: ListListComponent },
{ path: 'group', component: ListgroupComponent },
]
}
]
}
];
list.component:
<page-router-outlet></page-router-outlet>
从ListListComp-> ListgroupComp导航(通过点击元素触发):
this.router.navigate([ '../group' ], { relativeTo: this.route }