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

Posted 2023-04-13

【中文标题】Nativescript：在路由器插座之间导航

【英文标题】：Nativescript: Navigate between router-outlets

【发布时间】：2018-03-08 17:06:38

【问题描述】：

如需更好的介绍，请参阅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 实际上更新了正确的导航和组件，但不会切换到视图/出口。组件已加载，我通过登录狗详细信息视图的 OnInit 验证了这一点。它只是不会切换到该插座并显示该插座。

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

【参考方案1】：

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

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

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