使用 NativeScript 从组件 Button 导航到 TabView 中的 Tab Angular

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

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

<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]

看来我对导航的理解完全缺乏，所以请帮忙。我确信这是一个简单的修复，但我似乎无法弄清楚如何通过单击我的按钮导航到 "Courses" 选项卡。通过紧贴标签导航工作正常。

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

Answer 1

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

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

Updated Playground

使用 NativeScript 从组件 Button 导航到 TabView 中的 Tab Angular

Navigating from component Button to Tab in TabView using NativeScript Angular

angular

typescript

nativescript

angular2-nativescript