更好的介绍请参见关于奥特莱斯的博客文章 https://www.nativescript.org/blog/using-nested-router-outlets-with-nativescript-and-angular.
我使用 TabView 浏览用 nativescript (ProtectedComponent) 编写的移动应用程序。
<TabView
#tabView
tabsBackgroundColor="#f57c00" selectedTabTextColor="#B23010"
[(ngModel)]="selectedIndex"
(selectedIndexChanged)="tabViewIndexChange(tabView.selectedIndex)">
<StackLayout *tabItem="{iconSource: 'res://tab-icons/cats'}">
<cats-tab></cats-tab>
</StackLayout>
<StackLayout *tabItem="{iconSource: 'res://tab-icons/dogs'}">
<dogs-tab></dogs-tab>
</StackLayout>
</TabView>
这是与导航相关的组件代码的一部分:
navigateToCatsRoot() {
this.router.navigate([
'/protected',
{ outlets: { catOutlet: ['cats'] } }
]);
}
navigateToDogsRoot() {
this.router.navigate([
'/protected',
{ outlets: { dogOutlet: ['dogs'] } }
]);
}
tabViewIndexChange(index: number) {
switch(index) {
case 0:
this.navigateToCatsRoot();
break;
case 1:
this.navigateToDogsRoot();
break;
}
}
每个选项卡仅包含路由器出口配置,例如:
<router-outlet name="catOutlet"></router-outlet>
路由设置如下:
{ path: "", redirectTo: "/login", pathMatch: "full" },
{ path: "login", component: LoginComponent },
{ path: 'protected', component: ProtectedComponent, children: [
{ path: 'cats', component: CatsComponent, outlet: 'catOutlet'},
{ path: 'cat/:id', component: CatDetailComponent, outlet: 'catOutlet'},
{ path: 'dogs', component: DogsComponent, outlet: 'dogOutlet'},
{ path: 'dog/:id', component: DogDetailComponent, outlet: 'dogOutlet'},
]},
标签导航就像一个魅力。我可以通过选项卡导航导航到不同的商店,还可以从一个商店导航到该商店的详细信息页面:
this.router.navigate(
['/protected', { outlets: { catOutlet: ['cat', cat.id] } }]
);
我遇到的问题是,当我尝试从一个出口的一个详细视图跳转到另一个出口的另一个详细视图时。因此,如果我从猫详细视图中调用以下内容:
this.router.navigate(
['/protected', { outlets: { dogOutlet: ['dog', dog.id] } }]
);
我没有收到任何错误,但似乎什么也没有发生。一旦我使用选项卡导航(仍然有效)切换到插座,我会在很短的时间内看到详细的狗视图,然后将其重置为狗概述(这是选项卡导航应该做的)。
这意味着dogOutlet
实际上已使用正确的导航和组件进行了更新,但未切换到视图/出口。组件已加载,我通过登录狗详细信息视图的 OnInit 来验证这一点。它只是不切换到该插座并显示该插座。
如何不仅可以更新该插座,还可以切换到它,因为它适用于概述组件,就像选项卡视图一样?