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

问题描述：

有关更好的介绍，请参阅blog post about outlets。Nativescript：在路由器插座之间导航

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

我遇到的问题是从一个出口的一个细节视图跳转到另一个出口的另一个细节视图。所以，如果我打电话了猫的细节视图：

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

我没有得到任何类型的错误，但似乎没有发生。只要我使用标签导航（仍然有效）切换到插座，我会在重置到狗概览（这是标签导航应该执行的操作）之前的很短时间内看到细节狗视图。

这意味着dogOutlet实际上是使用正确的导航和组件更新的，但不会切换到视图/插座。该组件已加载，我通过登录狗详细视图的OnInit来验证。它只是不切换到该插座，并显示出口。

如何才能不仅更新该插座，而且切换到它，因为它与标签视图一样适用于概述组件？

答

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

问题是导航确实发生了变化，但TabView的selectedIndex未被更改。除了导航更改之外，一切正常！

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

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

相关推荐