Навигация по вложенным маршрутам в NativeScript Angular - PullRequest
Новая
       31

Навигация по вложенным маршрутам в NativeScript Angular

0 голосов
/ 10 апреля 2020

В моем проекте 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 есть нижняя панель со ссылками на компоненты Dashboard, Notice и Attendance, которые отображаются на выходе маршрутизатора в UserComponent. Пользователь нажимает на тему по user/dashboard маршруту до go по теме. SubjectComponent снова имеет две вкладки для «Обсуждение» и «Назначение», отображаемые в розетке маршрутизатора внутри SubjectComponent.

Проблема: Когда я нахожусь в SubjectComponent и нажимаю на любую из ссылок в нижняя панель для перехода к Dashboard, Attendance или Notice, приложение вылетает, и я получаю эту ошибку:

Произошло неперехваченное исключение в "главном" потоке. Вызов метода js onPause не выполнен Ошибка: java .lang.NullPointerException: попытка вызвать виртуальный метод 'int android .graphics.Bitmap.getWidth ()' для ссылки на пустой объект .

Это работает нормально, если я просто удаляю <page-router-outlet> в SubjectComponent. Я знаю, что где-то путаюсь во вложении этих маршрутов, но ошибка не выдает ничего указанного c, поэтому я не могу понять.

Пример игровой площадки: Откройте образец игровой площадки и нажмите кнопку «Открыть тему». Когда вы находитесь на предметной странице, нажмите на кнопку «Панель инструментов» внизу. Вы получите ошибку. Playground 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>

Метод openDashboard () в user.component.ts. 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);
}

1 Ответ

0 голосов
/ 11 апреля 2020

Я подозреваю, что проблема в том, что вы завернули свой фрейм (page-router-outlet) в ScrollView. Это не очень хорошая практика по разным причинам, и приложение, похоже, из-за этого требует * 1006. Перемещение ScrollView по странице решает проблему.

Обновленная игровая площадка

...