Nativescript:在路由器插座之间导航 [英] Nativescript: Navigate between router-outlets

问题描述

有关更好的介绍，请参阅 博客文章网点.

For better introduction see the blog post about outlets.

我使用 TabView 浏览我用 nativescript (ProtectedComponent) 编写的移动应用.

I use a TabView to navigate through my mobile app written with 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>

这是与导航相关的组件代码的一部分:

This is part of the component code relevant for the navigation:

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;
  }
}

每个标签只包含路由器出口配置，例如:

Every tab just contains the router outlet configuration, for example:

<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'},
  ]},

标签导航就像一个魅力.我可以通过标签导航导航到不同的网点，也可以从一个网点导航到该网点的详细信息页面:

The tab navigation works like a charm. I can navigate through the tab navigation to the different outlets and I can also navigate from one outlet to a detail page of that outlet:

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

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

The problem I'm running into is as soon as I'm trying to jump from one detail view in one outlet into the other detail view of the other outlet. So if I'm calling the following from the cat detail view:

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

我没有收到任何错误，但似乎什么也没发生.一旦我使用选项卡导航(仍然有效)切换到插座，我会在很短的时间内看到详细的狗视图，然后才将其重置为狗概览(这就是标签导航应该做的事情).

I don't get any kind of error but nothing seems to happen. As soon as I'm switching to the outlet by using the tab navigation (which still works) I see the detail dog view for a very short time before it's resetting to the dogs overview (which is what the tab navigation should do).

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

This means that the dogOutlet is actually updated with the right navigation and component but doesn'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 switch to that outlet and shows that outlet.

如何不仅可以更新该插座，还可以切换到它，因为它适用于与选项卡视图一样的概览组件?

How is it possible to not just update that outlet but also switch over to it as it works for the overview components as with the tab view?

推荐答案

我将问题发布到 github 存储库作为问题 并得到了答案.

I posted the question to the github repository as an issue and got an answer.

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

The problem was that the navigation was indeed changed, but the selectedIndex of the TabView wasn't changed. When doing this additionally to the navigation change, everything works!

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

这篇关于Nativescript:在路由器插座之间导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！