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

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

1 个答案: