nativescript - Nativescript 选项卡：想要路由到不是选项卡的模板/组件

Question

我有一个 4 选项卡式应用程序，并试图路由到不是选项卡之一的其他页面。

例如，我想链接到 QuicksnapComponent 中的表单。首先，我在 app.routing-module.ts 中进行了路由

import { NgModule } from "@angular/core";
import { RouterModule, Routes, Router } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { LoginComponent  } from "./login/login.component";

import { QuicksnapComponent } from "./quicksnap/quicksnap.component";
...
import * as app from 'tns-core-modules/application';
import { TabView } from "tns-core-modules/ui/tab-view";

export const COMPONENTS = [
    ...
    QuicksnapComponent, 
    ...];

export const ROUTES: Routes = [

    { path: "", redirectTo: "/login", pathMatch: "full" },

    { path: "login", component: LoginComponent },

    { path: "quicksnap", component: QuicksnapComponent },
    {
        path: "tabs",
        loadChildren: () => import("~/tabs/tabs.module").then(m => m.TabsModule)
    },         
];
...

tabs.module.ts：

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptRouterModule, NSEmptyOutletComponent } from "nativescript-angular/router";
import { NativeScriptCommonModule } from "nativescript-angular/common";

import { TabsComponent } from "./tabs.component";


@NgModule({
    imports: [
        NativeScriptCommonModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forChild([
            {
                path: "default", component: TabsComponent, children: [

                    {
                        path: "home",
                        outlet: "homeTab",
                        component: NSEmptyOutletComponent,
                        loadChildren: () => import("~/home/home.module").then(m => m.HomeModule),
                    },
                    {
                        path: "expense",
                        outlet: "expenseTab",
                        component: NSEmptyOutletComponent,
                        loadChildren: () => import("~/expense/expense.module").then(m => m.ExpenseModule),
                    },
                    {
                        path: "journey",
                        outlet: "journeyTab",
                        component: NSEmptyOutletComponent,
                        loadChildren: () => import("~/journey/journey.module").then(m => m.JourneyModule),
                    },
                    {
                        path: "reports",
                        outlet: "reportsTab",
                        component: NSEmptyOutletComponent,
                        loadChildren: () => import("~/reports/reports.module").then(m => m.ReportsModule),
                    }
                ]
            }
        ])
    ],
    declarations: [
        TabsComponent
    ],
    providers: [
    ],
    schemas: [NO_ERRORS_SCHEMA]
})
export class TabsModule { }

我有一个来自 HomeComponent 的链接：

      <StackLayout class="expenseStackLayout">
          <GridLayout class="home gradbg" rows="auto, *" (tap)="navigateToPage('./quicksnap')">
            <Label row="0"  text="Quicksnap Receipt"  class="homeItemTitle"></Label>
            <Label row="1"  text="Store a photo of a receipt" class="homeItemText"></Label>
          </GridLayout>        
      </StackLayout>

    navigateToPage(page: string) {
        this.routerExt.navigate([page]);
    }  

当我这样做时，它确实会调出 Quicksnap 表单，但顶部没有 ActionBar，底部也没有选项卡。

有没有办法显示这些？

我尝试了不同的策略并将到 QuicksnapComponent 的路由移到 home.module.ts 中：

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { HomeComponent } from "./home.component";
import { QuicksnapComponent } from "../quicksnap/quicksnap.component";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";


@NgModule({
    imports: [
        NativeScriptCommonModule,
        NativeScriptUIListViewModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forChild([
            { path: "", redirectTo: "home" },
            { path: "home", component: HomeComponent },
            { path: "quicksnap", component: QuicksnapComponent }
        ])
    ],
    declarations: [
        HomeComponent,
        QuicksnapComponent
    ],
    providers: [
    ],
    schemas: [NO_ERRORS_SCHEMA]
})
export class HomeModule { }

然后，我一登录就被带到一个带有底部选项卡的白色页面（应该被重定向到 HomeComponent）。

在控制台中，有错误消息抱怨我在 QuicksnapComponent 中的表单验证。好的，我摆脱了表单验证，然后我登录并被发送到 HomeComponent 但是当单击链接时出现控制台错误，例如：

S: ### ErrorHandler Error: Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'quicksnap'
JS: Error: Cannot match any routes. URL Segment: 'quicksnap'
JS:     at ApplyRedirects.push.../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (file:///node_modules\@angular\router\fesm5\router.js:2464:0) [angular]
JS:     at CatchSubscriber.selector (file:///node_modules\@angular\router\fesm5\router.js:2445:0) [angular]
JS:     at CatchSubscriber.push.../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (file:///node_modules\rxjs\_esm5\internal\operators\catchError.js:34:0) [angular]
JS:     at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (file:///node_modules\rxjs\_esm5\internal\Subscriber.js:79:0) [angular]
JS:     at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (file:///node_modules\rxjs\_esm5\internal\Subscriber.js:59:0) [angular]
JS:     at MapSubscriber....
JS: ### ErrorHandler Stack: Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'quicksnap'
JS: Error: Cannot match any routes. URL Segment: 'quicksnap'
JS:     at ApplyRedirects.push.../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (file:///node_modules\@angular\router\fesm5\router.js:2464:0) [angular]
JS:     at CatchSubscriber.selector (file:///node_modules\@angular\router\fesm5\router.js:2445:0) [angular]
JS:     at CatchSubscriber.push.../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (file:///node_modules\rxjs\_esm5\internal\operators\catchError.js:34:0) [angular]
JS:     at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (file:///node_modules\rxjs\_esm5\internal\Subscriber.js:79:0) [angular]
JS:     at MapSubscriber.push.../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (file:///node_modules\rxjs\_esm5\internal\Subscriber.js:59:0) [angular]
JS:     at MapSubscriber....

有什么想法可以导航到这样的页面并保留顶部的 ActionBar 和底部的选项卡吗？

蒂亚！

标签： nativescriptangular2-nativescript