在 NativeScript 中导航嵌套路由 Angular
Navigating nested routes in NativeScript Angular
在我的 NativeScript Angular 项目中,这是我的路由器模块:
export const routes = [
{path: "user", component: UserComponent,
children: [
{
path: "dashboard",
component: DashboardComponent
},
{
path: "notice",
component: NoticeComponent
},
{
path: "attendance",
component: AttendanceComponent
},
{
path: "subject",
component: SubjectComponent,
children: [
{
path: "discussion",
component: DiscussionComponent
},
{
path: "assignment",
component: AssignmentComponent,
children: [
{
path: "assignment-report", component: AssignmentReportComponent
}
]
}
]
}
]
}
];
user.component.html
有一个底部栏,其中包含仪表板、通知和出勤组件的链接,这些组件显示在 UserComponent 的路由器出口中。用户单击 user/dashboard
路由中的主题以转到主题。 SubjectComponent 再次在 SubjectComponent 内的路由器插座中显示 'Discussion' 和 'Assignment' 两个选项卡。
问题: 当我在 SubjectComponent 中并单击底部栏中的任何链接以导航到仪表板、考勤或通知时,应用程序崩溃并出现此错误:
"main" 线程上发生未捕获的异常。
调用 js 方法 onPause 失败
错误:java.lang.NullPointerException:尝试在空对象引用 上调用虚拟方法'int android.graphics.Bitmap.getWidth()'。
如果我只删除 SubjectComponent 中的 <page-router-outlet>
就可以正常工作。我知道我在嵌套这些路由时搞砸了,但错误没有抛出任何具体内容,所以我无法弄清楚。
游乐场示例: 打开游乐场示例并单击 "Open Subject" 按钮。当您在主题页面上时,单击底部的 "Dashboard" 按钮。你会得到错误。
游乐场 Link:https://play.nativescript.org/?template=play-ng&id=qGvsVF&v=11
添加一些可能与此问题相关的代码片段。
user.component.html
<GridLayout style="background-color: #ffffff;" rows="*, auto">
<StackLayout class="content-container" row="0">
<page-router-outlet></page-router-outlet>
</StackLayout>
<StackLayout class="bottom-bar" row="1">
<StackLayout class="menu-container" horizontalAlignment="center" orientation="horizontal">
<Image (tap)="openDashboard()" [ngStyle]="{'border-color': isHome?'#1d87c9' :'#ffffff'}" class="btn-home" [src]="menuImages[0]"></Image>
<Image (tap)="openNotice()" [ngClass]="{'btn-active': isNotice}" class="btn-icon" [src]="menuImages[1]"></Image>
<Image (tap)="openAttendance()" [ngClass]="{'btn-active': isAttendance}" class="btn-icon" [src]="menuImages[2]"></Image>
</StackLayout>
</StackLayout>
user.component.ts 中的 openDashboard() 方法。 openNotice() 和 openAttendance() 相似
import { RouterExtensions } from "nativescript-angular/router";
constructor(private routerExtensions: RouterExtensions) {}
openDashboard(){
this.routerExtensions.navigateByUrl('user/dashboard');
this.menuImages = ["res://uni_full","res://notice_default","res://attendance_default"];
this.isHome = true;
this.isNotice = false;
this.isAttendance = false;
}
subject.component.html
<StackLayout class="main">
<GridLayout rows="auto, *">
<StackLayout row="0" class="subject-ribbon">
<StackLayout class="tab-container" orientation="horizontal">
<StackLayout (tap)="changeTab('discussion')" class="tab">
<Label class="tab-label" text=" Discussion"></Label>
<Label class="tab-indicator"></Label>
</StackLayout>
<StackLayout (tap)="changeTab('assignment')" class="tab">
<Label class="tab-label" text=" Assignment"></Label>
<Label class="tab-indicator"></Label>
</StackLayout>
</StackLayout>
</StackLayout>
<ScrollView (scroll)="onScroll($event)" row="1">
<StackLayout>
<page-router-outlet></page-router-outlet>
</StackLayout>
</ScrollView>
</GridLayout>
subject.component.ts
import { RouterExtensions } from "nativescript-angular/router";
constructor(private routerExtensions: RouterExtensions) {}
changeTab(tabName){
this.tabMode = tabName;
this.routerExtensions.navigateByUrl('user/subject/' + tabName);
}
我怀疑问题是您用 ScrollView 包装了框架 (page-router-outlet)。由于各种原因,这不是一个好的做法,应用程序似乎因此而崩溃。在页面内移动 ScrollView 可解决问题。
在我的 NativeScript Angular 项目中,这是我的路由器模块:
export const routes = [
{path: "user", component: UserComponent,
children: [
{
path: "dashboard",
component: DashboardComponent
},
{
path: "notice",
component: NoticeComponent
},
{
path: "attendance",
component: AttendanceComponent
},
{
path: "subject",
component: SubjectComponent,
children: [
{
path: "discussion",
component: DiscussionComponent
},
{
path: "assignment",
component: AssignmentComponent,
children: [
{
path: "assignment-report", component: AssignmentReportComponent
}
]
}
]
}
]
}
];
user.component.html
有一个底部栏,其中包含仪表板、通知和出勤组件的链接,这些组件显示在 UserComponent 的路由器出口中。用户单击 user/dashboard
路由中的主题以转到主题。 SubjectComponent 再次在 SubjectComponent 内的路由器插座中显示 'Discussion' 和 'Assignment' 两个选项卡。
问题: 当我在 SubjectComponent 中并单击底部栏中的任何链接以导航到仪表板、考勤或通知时,应用程序崩溃并出现此错误:
"main" 线程上发生未捕获的异常。 调用 js 方法 onPause 失败 错误:java.lang.NullPointerException:尝试在空对象引用 上调用虚拟方法'int android.graphics.Bitmap.getWidth()'。
如果我只删除 SubjectComponent 中的 <page-router-outlet>
就可以正常工作。我知道我在嵌套这些路由时搞砸了,但错误没有抛出任何具体内容,所以我无法弄清楚。
游乐场示例: 打开游乐场示例并单击 "Open Subject" 按钮。当您在主题页面上时,单击底部的 "Dashboard" 按钮。你会得到错误。 游乐场 Link:https://play.nativescript.org/?template=play-ng&id=qGvsVF&v=11
添加一些可能与此问题相关的代码片段。
user.component.html
<GridLayout style="background-color: #ffffff;" rows="*, auto">
<StackLayout class="content-container" row="0">
<page-router-outlet></page-router-outlet>
</StackLayout>
<StackLayout class="bottom-bar" row="1">
<StackLayout class="menu-container" horizontalAlignment="center" orientation="horizontal">
<Image (tap)="openDashboard()" [ngStyle]="{'border-color': isHome?'#1d87c9' :'#ffffff'}" class="btn-home" [src]="menuImages[0]"></Image>
<Image (tap)="openNotice()" [ngClass]="{'btn-active': isNotice}" class="btn-icon" [src]="menuImages[1]"></Image>
<Image (tap)="openAttendance()" [ngClass]="{'btn-active': isAttendance}" class="btn-icon" [src]="menuImages[2]"></Image>
</StackLayout>
</StackLayout>
user.component.ts 中的 openDashboard() 方法。 openNotice() 和 openAttendance() 相似
import { RouterExtensions } from "nativescript-angular/router";
constructor(private routerExtensions: RouterExtensions) {}
openDashboard(){
this.routerExtensions.navigateByUrl('user/dashboard');
this.menuImages = ["res://uni_full","res://notice_default","res://attendance_default"];
this.isHome = true;
this.isNotice = false;
this.isAttendance = false;
}
subject.component.html
<StackLayout class="main">
<GridLayout rows="auto, *">
<StackLayout row="0" class="subject-ribbon">
<StackLayout class="tab-container" orientation="horizontal">
<StackLayout (tap)="changeTab('discussion')" class="tab">
<Label class="tab-label" text=" Discussion"></Label>
<Label class="tab-indicator"></Label>
</StackLayout>
<StackLayout (tap)="changeTab('assignment')" class="tab">
<Label class="tab-label" text=" Assignment"></Label>
<Label class="tab-indicator"></Label>
</StackLayout>
</StackLayout>
</StackLayout>
<ScrollView (scroll)="onScroll($event)" row="1">
<StackLayout>
<page-router-outlet></page-router-outlet>
</StackLayout>
</ScrollView>
</GridLayout>
subject.component.ts
import { RouterExtensions } from "nativescript-angular/router";
constructor(private routerExtensions: RouterExtensions) {}
changeTab(tabName){
this.tabMode = tabName;
this.routerExtensions.navigateByUrl('user/subject/' + tabName);
}
我怀疑问题是您用 ScrollView 包装了框架 (page-router-outlet)。由于各种原因,这不是一个好的做法,应用程序似乎因此而崩溃。在页面内移动 ScrollView 可解决问题。