使用NativeScript Angular在TabView中从组件按钮导航到Tab

Question

我在app.component.html中设置了这样的TabView：

<TabView androidTabsPosition="bottom">
    <page-router-outlet
        *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
        name="homeTab">
    </page-router-outlet>
    <page-router-outlet
        *tabItem="{title: 'Game', iconSource: getIconSource('browse')}"
        name="gameTab">
    </page-router-outlet>
    <page-router-outlet
        *tabItem="{title: 'Courses', iconSource: getIconSource('search')}"
        name="coursesTab">
    </page-router-outlet>
</TabView>

app-routing.module.ts中的任何我的路由都是这样的：

const routes: Routes = [
    {
        path: "",
        redirectTo: "/(homeTab:home/default//gameTab:game/default//coursesTab:courses/default)",
        pathMatch: "full"
    },
    {
        path: "home",
        component: NSEmptyOutletComponent,
        loadChildren: "~/app/home/home.module#HomeModule",
        outlet: "homeTab"
    },
    {
        path: "game",
        component: NSEmptyOutletComponent,
        loadChildren: "~/app/game/game.module#GameModule",
        outlet: "gameTab"
    },
    {
        path: "courses",
        component: NSEmptyOutletComponent,
        loadChildren: "~/app/courses/courses.module#CoursesModule",
        outlet: "coursesTab"
    }
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

现在我希望通过点击我的homeTab中的按钮从home.component.html导航，所以我试试这个：

<Button text="Add a course" (tap)="gotoCourses()" class="btn-green" width="50%"></Button>

在我的home.component.ts中，我尝试导航到/courses路径：

constructor(private routerExtensions: RouterExtensions) { }

public gotoCourses(){
    this.routerExtensions.navigate(["/courses"]);
}

我也尝试过这些路径：

courses
courses/default
//coursesTab
//coursesTab:courses
//coursesTab:courses/default
../coursesTab:courses/default
../coursesTab:courses
../coursesTab
../courses
../courses/default

但我得到一个错误：

S: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'courses'
JS: Error: Cannot match any routes. URL Segment: 'courses'
JS:     at ApplyRedirects.noMatchError (file:///data/data/org.nativescript.SimpleStats/files/app/tns_modules/@angular/router/bundles/router.umd.js:2557:20) [angular]
JS:     at CatchSubscriber.selector (file:///data/data/org.nativescript.SimpleStats/files/app/tns_modules/@angular/router/bundles/router.umd.js:2538:33) [angular]
JS:     at CatchSubscriber.error (file:///data/data/org.nativescript.SimpleStats/files/app/tns_modules/rxjs/internal/operators/catchError.js:48:31) [angular]
JS:     at MapSubscriber.Subscriber._error (file:///data/data/org.nativescript.SimpleStats/files/app/tns_modules/rxjs/internal/Subscriber.js:93:26) [angular]
JS:     at MapSubscriber.Subscriber.error (file:///data/data/org.nativescript.SimpleStats/files/app/tns_modules/rxjs/internal/Subscriber.js:73:18) [angular]

似乎我对导航的理解完全缺乏所以请帮忙。我确信这是一个简单的修复，但我似乎无法通过单击我的按钮找出如何导航到“课程”选项卡。通过粘贴选项卡导航工作正常。

这是一个游乐场演示：https://play.nativescript.org/?template=play-ng&id=3zF1mB&v=2

Answer 1

您将仅使用导航方法导航到新页面。在您的示例中，课程已在第二个选项卡的第二个路由器插座中加载，因此您所要做的就是更改选定的选项卡视图索引。

tabView.selectedIndex = 1; // will show the course page

Updated Playground