如何解决Angular 只加载最后一个命名的路由器出口
我有一个这样的标签结构:
- 底部标签
-
顶部标签 1
- 标签 1
- 标签 2
-
顶部标签 2
- 标签 1
- 标签 2
-
问题是:Angular 从顶部选项卡 2 (Tab 1,Tab 2) 加载命名插座,但将顶部选项卡 1 中的选项卡留空。但是,如果我注释导航到顶部选项卡 2 的选项卡的代码,它会显示顶部选项卡 1 中的选项卡。
这里是路由配置:
{
path: 'tabs',component: MainTabComponent,children: [ // Bottom tab
{
path: 'famasi',component: FamasiTabComponent,outlet: 'famasi',children: [ // Top tab 1
{path: 'kategori-yo',component: KategoriYoComponent,outlet: 'kategoriYo'},// Tab 1
{path: 'komand-yo',component: KomandYoComponent,outlet: 'komandYo'},// Tab 2
]
},{
path: 'randevou-tab',component: RandevouTabComponent,outlet: 'randevou',children: [ // Top tab 2
{path: 'item-yo',component: ItemYoComponent,outlet: 'itemYo'},// Tab 1
{path: 'randevou-yo',component: RandevouYoComponent,outlet: 'randevouYo'},]
}
MainTabComponent(底部选项卡):
// Typescript
constructor(private router: RouterExtensions,private route: ActivatedRoute,private page: Page) {
}
ngOnInit(): void {
this.router.navigate([{
outlets: {
famasi: ['famasi'],randevou: ['randevou-tab'],}
}],{relativeTo: this.route})
}
// Html
<TabContentItem>
<StackLayout>
<router-outlet name="famasi"></router-outlet>
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<router-outlet name="randevou"></router-outlet>
</StackLayout>
</TabContentItem>
顶部标签 1:
// TS
constructor(private router: RouterExtensions,private route: ActivatedRoute) {
}
ngOnInit(): void {
// Loads the tabs
this.router.navigate([{
outlets: {
kategoriYo: ['kategori-yo'],komandYo: ['komand-yo']
}
}],{relativeTo: this.route})
}
// HTML
<TabContentItem>
<router-outlet name="kategoriYo"></router-outlet>
</TabContentItem>
<TabContentItem>
<router-outlet name="komandYo"></router-outlet>
</TabContentItem>
顶部标签 2:
//TS
constructor(private router: RouterExtensions,private route: ActivatedRoute) {
}
ngOnInit(): void {
this.router.navigate([
{
"outlets": {
itemYo: ['item-yo'],randevouYo: ['randevou-yo']
}
}
],{relativeTo: this.route})
}
// HTML
<TabContentItem>
<router-outlet name="itemYo"></router-outlet>
</TabContentItem>
<TabContentItem>
<router-outlet name="randevouYo"></router-outlet>
</TabContentItem>
我无法显示整个 HTML 模板以避免出现很多代码。并且代码中没有错误。如果我评论顶部标签 2 中的 router.navigate
,它会加载顶部标签 1,如果我取消注释 router.navigate
,它只会加载顶部标签 2。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。