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來驗證。它只是不切換到該插座，並顯示出口。

如何才能不僅更新該插座，而且切換到它，因爲它與標籤視圖一樣適用於概述組件？

來源

2017-09-27 Christian Kolb

我將問題發佈到github repository as an issue並得到了答案。

問題是導航確實發生了變化，但TabView的selectedIndex未被更改。除了導航更改之外，一切正常！

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

來源

2017-10-07 07:57:25

Nativescript：在路由器插座之間導航

回答

相關問題