在 NativeScript Angular 中导航嵌套路由答案

【问题标题】：Navigating nested routes in NativeScript Angular在 NativeScript Angular 中导航嵌套路由
【发布时间】：2020-04-11 16:14:00
【问题描述】：

在我的 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 内部的路由器插座中显示了“讨论”和“分配”两个选项卡。

问题：当我在 SubjectComponent 中并单击底部栏中的任何链接以导航到仪表板、出勤或通知时，应用程序崩溃并出现此错误：

“主”线程发生未捕获的异常。调用js方法onPause失败错误：java.lang.NullPointerException：尝试在空对象引用上调用虚拟方法“int android.graphics.Bitmap.getWidth()”。

如果我只删除 SubjectComponent 中的 <page-router-outlet> 就可以了。我知道我在嵌套这些路由时搞砸了，但错误并没有抛出任何具体的东西，所以我无法弄清楚。

Playground 示例： 打开 Playground 示例并单击“Open Subject”按钮。当您在主题页面上时，单击底部的“仪表板”按钮。你会得到错误。游乐场链接：https://play.nativescript.org/?template=play-ng&id=qGvsVF&v=11

添加一些可能与此问题相关的代码 sn-ps。

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="&#xf27a;&nbsp;&nbsp;&nbsp;Discussion"></Label>
                <Label class="tab-indicator"></Label>
            </StackLayout>
            <StackLayout (tap)="changeTab('assignment')" class="tab">
                <Label class="tab-label" text="&#xf15c;&nbsp;&nbsp;&nbsp;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);
}

【问题讨论】：

嵌套太多了，你能设置一个 Playground 示例吗？
我制作了一个游乐场样本，但我无法重现该错误。这意味着问题显然不在于路由。我唯一确定的是，在我的原始应用程序中，如果我删除主题组件中的，它可以解决问题。这是操场示例：play.nativescript.org/?template=play-ng&id=qGvsVF&v=7
如果您对图像路径进行硬编码，而不是使用属性绑定 - 您还会看到崩溃吗？
我用简单的按钮替换了图片链接。崩溃仍然存在。
没有样本来重现问题，我很难说。我建议您查看 android 设备日志，看看是否提供有关崩溃的更多信息。

标签： android angular nativescript angular2-routing nativescript-angular

【解决方案1】：

我怀疑问题在于您使用 ScrollView 包装了框架（页面路由器出口）。由于各种原因，这不是一个好习惯，并且该应用程序似乎因此而崩溃。在页面内移动 ScrollView 可以解决问题。

Updated Playground

【讨论】：