nativescript - 基于标签的导航路由困难
问题描述
我有一个基于选项卡的应用程序，该应用程序具有登录功能，该应用程序以前将登录信息作为选项卡视图的模式。然而，在加载时，tabview 在覆盖登录之前短暂可见，这是我们不想要的。
因此，根据这篇文章使用基于选项卡的导航实现 NativeScript 应用程序的登录以及使用“嵌套辅助页面插座”和用于选项卡页面的延迟加载模块的相关演示，对应用程序进行了重组。
我不知道如何创建从一个选项卡的内容区域到另一个选项卡的链接。
在我的家庭组件模板中，我有一个链接
<Label row="0" text="Expense" class="homeItemTitle" [nsRouterLink]="['../expense']"></Label>
费用组件的位置在费用.module.ts 中定义
NativeScriptRouterModule.forChild([
{ path: "", redirectTo: "expense" },
{ path: "expense", component: ExpenseComponent },
{ path: "expense/:claimid", component: ReceiptComponent},
])
而费用.module.ts 的位置在 tab.module.ts 中定义
{
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),
}
]
}
])
],
当我点击链接时，我收到错误消息
JS: ### ErrorHandler Error: Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'tabs/default'
JS: Error: Cannot match any routes. URL Segment: 'tabs/default'
然后我尝试了以下方法：
主页组件模板中的链接：
<Label row="0" text="Expense" class="homeItemTitle" (tap)="navigateToExpense()"></Label>
navigateToExpense() {
this.routerExt.navigate([
'../expense', { outlets: { expenseTab: ['expense'] } }
])
}
Which yields the error
JS：### ErrorHandler 错误：错误：未捕获（在承诺中）：错误：无法匹配任何路由。URL 段：“费用”JS：错误：无法匹配任何路由。URL 段：“费用”
Any ideas what I am missing here?
TIA
这是我的 app.module.ts
import { NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA, ErrorHandler, ViewContainerRef } from "@angular/core";
import { NSModuleFactoryLoader } from "nativescript-angular/router";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule, COMPONENTS } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { CoreModule } from "./core/core.module";
//import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
import { DropDownModule } from "nativescript-drop-down/angular";
//import { Router, NavigationStart, NavigationEnd } from "@angular/router";
import { ModalDialogService } from "nativescript-angular/modal-dialog";
import { ModalService } from './login/modal.service';
import { PasswordModalService } from './forgot_password/modal.service';
import { ModalDatePickerComponent } from "./modal-datepicker/modal-datepicker.component";
import { MinLengthDirective, IsEmailDirective, IsNumberDirective } from "./input.directive";
import { ReportsComponent } from "~/reports/reports.component";
import { UpdateService } from "~/shared/update.service";
import { UtilsService } from "~/shared/utils.service";
import { NativeScriptRouterModule } from 'nativescript-angular/router';
import { FRouteService } from './routeService';
import { LoginComponent } from './login/login.component';
import { enable as traceEnable, addCategories } from "tns-core-modules/trace";
traceEnable();
export class MyErrorHandler implements ErrorHandler {
handleError(error) {
console.log("### ErrorHandler Error: " + error.toString());
console.log("### ErrorHandler Stack: " + error.stack);
}
}
@NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
AppRoutingModule,
// NativeScriptRouterModule,
NativeScriptUIListViewModule,
NativeScriptFormsModule,
NativeScriptHttpModule,
NativeScriptHttpClientModule,
DropDownModule,
// NativeScriptUIListViewModule,
CoreModule
],
declarations: [
AppComponent,
ModalDatePickerComponent,
MinLengthDirective,
IsEmailDirective,
IsNumberDirective,
...COMPONENTS
],
schemas: [
NO_ERRORS_SCHEMA
],
providers: [
ModalDialogService,
ModalService,
PasswordModalService,
ReportsComponent,
UpdateService,
FRouteService,
UtilsService,
{ provide: ErrorHandler, useClass: MyErrorHandler },
{ provide: NgModuleFactoryLoader, useClass: NSModuleFactoryLoader }
],
entryComponents: [
ModalDatePickerComponent
]
})
export class AppModule { }
这些是 app-routing.module.ts 中的路由：
export const ROUTES: Routes = [
{ path: "", redirectTo: "/login", pathMatch: "full" },
{ path: "login", component: LoginComponent },
{
path: "tabs",
loadChildren: () => import("~/tabs/tabs.module").then(m => m.TabsModule)
},
========= 5 月 28 日添加 tabs.component.html
<BottomNavigation>
<TabStrip iosIconRenderingMode="alwaysOriginal">
<TabStripItem>
<Label text="Home"></Label>
<Image src="font://" class="fas t-36"></Image>
</TabStripItem>
<TabStripItem>
<Label text="Expense"></Label>
<Image src="font://" class="fas t-36"></Image>
</TabStripItem>
<TabStripItem>
<Label text="Journey"></Label>
<Image src="font://" class="fas t-36"></Image>
</TabStripItem>
<TabStripItem>
<Label text="Reports"></Label>
<Image src="font://" class="fas t-36"></Image>
</TabStripItem>
</TabStrip>
<TabContentItem>
<page-router-outlet name="homeTab"></page-router-outlet>
</TabContentItem>
<TabContentItem>
<page-router-outlet name="expenseTab"></page-router-outlet>
</TabContentItem>
<TabContentItem>
<page-router-outlet name="journeyTab"></page-router-outlet>
</TabContentItem>
<TabContentItem>
<page-router-outlet name="reportsTab"></page-router-outlet>
</TabContentItem>
</BottomNavigation>
我在服务 FRouteService 中有路由功能，我将其导入到带有指向另一个选项卡的链接的组件中。
import { Injectable } from '@angular/core';
import { BottomNavigation } from "tns-core-modules/ui/bottom-navigation";
@Injectable()
export class FRouteService {
constructor(
private bottomNav: BottomNavigation) {}
routeto(index) {
this.bottomNav.selectedIndex=index;
}
}
当我加载应用程序时，出现以下错误。
JS: ### ErrorHandler Error: Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[FRouteService -> BottomNavigation]:
JS: StaticInjectorError(Platform: core)[FRouteService -> BottomNavigation]:
JS: NullInjectorError: No provider for BottomNavigation!
JS: Error: NullInjectorError: No provider for BottomNavigation!
JS: at NullInjector.push.../node_modules/@angular/core/fesm5/core.js.NullInjector.get (file:///node_modules\@angular\core\fesm5\core.js:1225:0) [angular]
JS: at resolveToken (file:///node_modules\@angular\core\fesm5\core.js:1463:0) [angular]
JS: at tryResolveToken (file:///node_modules\@angular\core\fesm5\core.js:1407:0) [angular]
JS: at StaticInjector.push.../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (file:///node_modules\@angular\core\fesm5\core.js:1311:0) [angular]
JS: at resolveToken (file:///node_modules\@angular\core\fesm5\core.js:1463:0) [angular]
JS: at tryResolveToken (file:///data/data/com.FileEx...
JS: ### ErrorHandler Stack: Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[FRouteService -> BottomNavigation]:
JS: StaticInjectorError(Platform: core)[FRouteService -> BottomNavigation]:
JS: NullInjectorError: No provider for BottomNavigation!
JS: Error: NullInjectorError: No provider for BottomNavigation!
JS: at NullInjector.push.../node_modules/@angular/core/fesm5/core.js.NullInjector.get (file:///node_modules\@angular\core\fesm5\core.js:1225:0) [angular]
JS: at resolveToken (file:///node_modules\@angular\core\fesm5\core.js:1463:0) [angular]
JS: at tryResolveToken (file:///node_modules\@angular\core\fesm5\core.js:1407:0) [angular]
JS: at StaticInjector.push.../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (file:///node_modules\@angular\core\fesm5\core.js:1311:0) [angular]
JS: at resolveToken (file:///node_modules\@angular\core\fesm5\core.js:1463:0) [angular]
JS: at tryResolveToken (file:///data/data/com.FileEx...
我要以正确的方式导航 BottomLoader 吗？
我不明白这个消息
NullInjectorError: No provider for BottomNavigation!
解决方案
推荐阅读
- javascript - 如何找出 ReactJS 中的错误来自哪里？
- java - 如何在 Spark 2.3.1 中使用 map 和 reduce 函数进行分组和计数
- php - 如何反转 PHP while 循环，包括从不同长度的最后一个数字开始的增量数字？
- python - Anaconda Navigator 打不开 (W10-64bit)
- python - pyodbc 截断列名
- ansible - Ansible 字典可以引用自己吗？
- c# - Unity3d - 面板在 android 平台上无法正常工作
- matplotlib - 在python中可视化向量
- tmux - Tmux 从不同的文件加载多个环境
- python - 使用 Python Asyncio 库同时运行恒定数量的异步任务