Android 在NativeScript中导航嵌套路由
在我的NativeScript Angular项目中,这是我的路由器模块:Android 在NativeScript中导航嵌套路由,android,angular,nativescript,angular2-routing,nativescript-angular,Android,Angular,Nativescript,Angular2 Routing,Nativescript Angular,在我的NativeScript Angular项目中,这是我的路由器模块: export const routes = [ {path: "user", component: UserComponent, children: [ { path: "dashboard", component: DashboardComponent }, { path: "notice"
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
route中单击主题以转到主题。SubjectComponent内部的路由器出口中再次显示“讨论”和“分配”两个选项卡
问题:当我在SubjectComponent中并单击底部栏中的任何链接导航到仪表板、考勤或通知时,应用程序崩溃,我出现以下错误:
在“主”线程上发生未捕获的异常。
在Pause上调用js方法失败
错误:java.lang.NullPointerException:尝试在空对象引用上调用虚拟方法“int android.graphics.Bitmap.getWidth()”
如果我只是删除SubjectComponent中的
,效果很好。我知道我在嵌套这些路径的过程中遇到了麻烦,但是错误并没有抛出任何具体的东西,所以我无法弄清楚
操场示例:打开操场示例并单击“打开主题”按钮。当您在主题页面上时,单击底部的“仪表板”按钮。您将得到错误。
游乐场连接:
添加一些可能与此问题相关的代码片段
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>
<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.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>
<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>
我怀疑问题在于您用滚动视图包装了框架(页面路由器出口)。由于各种原因,这不是一个好的实践,应用程序似乎因此崩溃。在页面内移动ScrollView可以解决此问题
嵌套太多了,你能设置一个游乐场示例吗?我制作了一个游乐场示例,但无法重现错误。这意味着问题显然与路由无关。我唯一能确定的是,在我原来的应用程序中,如果我删除了主题中的组件,它就解决了问题。这里是游乐场示例:如果您硬编码图像路径,而不是使用属性绑定-您仍然看到崩溃吗?我用简单的按钮替换了图像链接。崩溃仍然存在。如果没有样本来重现这个问题,我很难判断。我建议您查看android设备日志,看看是否能提供更多关于崩溃的信息。