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

问题描述

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

我使用TabView浏览通过本机脚本(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 detail视图中调用以下内容:

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

我没有收到任何错误，但似乎什么也没有发生.通过使用选项卡导航切换到插座(仍然有效)后，我会在很短的时间内看到详细的狗视图，然后将其重置为狗的概述(这是选项卡导航应该执行的操作)./p>

这意味着dogOutlet实际上是使用正确的导航和组件更新的，但不会切换到视图/插座.加载组件后，我通过登录狗详细信息视图的OnInit进行了验证.它只是不切换到该插座，而是显示该插座.

像标签视图一样，如何不仅可以更新该插座，还可以切换到该插座以用于概览组件?

解决方案

我将问题发布到

For better introduction see the blog post about outlets.

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>

The routing is setup in the following way:

{ 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] } }]
);

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).

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?

解决方案

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

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;

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