Nativescript：在路由器插座之间导航

有关更好的介绍，请参阅blog post about outlets .

我使用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] } }]
);

我遇到的问题是，当我试图从一个插座的一个细节视图跳到另一个插座的另一个细节视图时 . 所以，如果我从cat详细信息视图中调用以下内容：

this.router.navigate(
    ['/protected', { outlets: { dogOutlet: ['dog', dog.id] } }]
);

我没有得到任何错误，但似乎没有任何事情发生 . 一旦我通过使用选项卡导航（仍然有效）切换到插座，我会在重置为狗概述（这是选项卡导航应该执行的操作）之前的很短时间内看到详细的狗视图 .

这意味着 dogOutlet 实际上是使用正确的导航和组件更新的，但是没有't switch to the view / outlet. The component is loaded, I verified that with logging in the OnInit of the dog detail view. It just doesn't切换到该插座并显示该插座 .

如何更新该插座，还可以切换到它，因为它适用于概览组件，就像选项卡视图一样？