ios - Nativescript:在路由器 socket 之间导航

Question

有关更好的介绍，请参阅 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] } }]
);

我遇到的问题是，当我试图从一个 socket 的一个详细 View 跳转到另一个 socket 的另一个详细 View 时。因此，如果我从 cat 详细信息 View 中调用以下内容:

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

我没有收到任何类型的错误，但似乎什么也没发生。一旦我通过使用选项卡导航(仍然有效)切换到 socket ，我会在很短的时间内看到详细的狗 View ，然后它会重置为狗概览(这是选项卡导航应该做的)。

这意味着 dogOutlet 实际上更新了正确的导航和组件，但没有切换到 View /导出。组件已加载，我通过登录狗详细信息 View 的 OnInit 验证了这一点。它只是不切换到那个 socket 并显示那个 socket 。

怎么可能不仅更新那个导出，而且还切换到它，因为它适用于概览组件，就像选项卡 View 一样？

Answer 1

我将问题发布到 github repository as an issue并得到了答案。

问题是导航确实改变了，但是 TabView 的 selectedIndex 没有改变。在导航更改之外执行此操作时，一切正常!

let tabView:TabView = <TabView>this.page.getViewById("tabView");
tabView.selectedIndex = 2;