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

【问题标题】：Navigating from component Button to Tab in TabView using NativeScript Angular使用 NativeScript Angular 在 TabView 中从组件 Button 导航到 Tab
【发布时间】：2019-04-27 07:32:53
【问题描述】：

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

看来我对导航的理解完全缺乏所以请帮忙。我确信这是一个简单的解决方法，但我似乎无法通过单击我的按钮来确定如何导航到“课程”选项卡。通过紧贴标签进行导航工作正常。

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

【问题讨论】：

您有多个路由器插座同时处于活动状态，但在调用导航方法时，您传递的路径没有使用哪个路由器插座的信息。您必须在此处使用激活路由的相对路径。
@Manoj 你能详细说明一下吗？我已经用我现在尝试过的相对路径更新了问题，但我得到了同样的错误。
你能分享一个可以重现问题的 Playground 示例吗？
@Manoj 更新了这个问题，提供了一个游乐场的链接，它包含一些垃圾，但应该足够简单。
课程页面已经加载到您的插座中，您需要在这里通过更新选项卡视图上的选定索引来切换选项卡。仅当您想在选项卡上打开新的详细信息页面时才使用导航。

标签： angular typescript nativescript angular2-nativescript

【解决方案1】：

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

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

Updated Playground

【讨论】：

谢谢，效果很好！有什么办法让它与路由器链接一起工作？例如[nsRouterLink]="['../../courses/default']" ?
非常感谢，这也/仍然适用于将替换 TabView 的 BottomNavigation 和 Tab 组件。