Ошибка маршрутизации NativeScript Angular после изменения контекста приложения - PullRequest
Новая
       26

Ошибка маршрутизации NativeScript Angular после изменения контекста приложения

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

Я прошу прощения в начале за длинное объяснение, которое следует. Я считаю, что необходимо полностью объяснить, что происходит.

Я настроил свое приложение NS на использование навигации с вкладками и экрана входа в систему, выполнив запись здесь . Общая структура приложения идентична структуре приложения в git репо здесь .

Вместо игроков и команд в git репо у меня есть 3 вкладки : Панель инструментов, советник и задачи. Компонент задач использует службу задач, чтобы получить задачи для пользователя через вызов API, а затем отображает список задач. Пользователь может нажать на задачу, чтобы просмотреть детали задачи. Я использую класс Global, который импортируется всеми компонентами для хранения контекстной информации, такой как имя пользователя и токен API, полученный после аутентификации.

Я заменил компонент приветствия компонентом профиля, идея в то время как кнопка профиля отображается на панели действий, и из любого места в представлении вкладок пользователь может нажать кнопку профиля, чтобы просмотреть страницу профиля. Я достиг этого, включив следующий код в каждый из компонентов вкладки: 

toProfile() {
    this.re.navigateByUrl("/profile");
}

Я уверен, что это не самый эффективный способ сделать это, но это было то, что я придумал, и это работает. Страница профиля показывает немного информации и позволяет пользователю выйти из системы. Если пользователь назначен администратором, он предоставляет форму, позволяющую администратору выдавать себя за любого другого пользователя и видеть приложение в точности так, как этот пользователь. В следующем коде отображается олицетворенная форма: 

<GridLayout *ngIf="isAdmin" columns="auto, auto" rows="auto, auto">
    <TextField hint="username" [(ngModel)]="impersonateUser" row="1" col="0"></TextField>
    <button text="Impersonate" (tap)="impersonate()" row="1" col="1"></button>
</GridLayout>

Компонент профиля импортирует службу пользователя, службу задачи и класс Global. Когда пользователь с правами администратора вводит имя пользователя (например, мы будем использовать «user2») и нажимает «олицетворять», вызывается следующая функция в компоненте профиля: 

impersonate() {
    Global.username = this.impersonateUser;
    Global.isAdmin = "0";
    this.taskService.reset();
    this.userService.getUserInfo(Global.username)
        .subscribe(
            (resp) => {
                this.userService.saveSession(Global.username, Global.token, Global.expires);
                this.re.navigateByUrl("/tabs/default", {clearHistory: true});
            },
            (exception) => {
                alert("Something went wrong.");
            }
        );   
}

Функция сброса службы задач просто очищает любые данные служба задач была в памяти. В конце я перехожу к / tabs / default, чтобы активировать функции onInit компонентов, чтобы новые задачи выполнялись для пользователя, выдавшего себя за другого. Страница задач загружается и отображает правильные задачи, которые соответствуют user2, с помощью следующего кода: 

<ng-template ngFor let-task [ngForOf]="tasks">
    <GridLayout class="data-container" columns="*, auto" rows="auto, auto" [nsRouterLink]="['../task', task.ID]">
        <Label [text]="task.TITLE" class="task-title" row="0" col="0"></Label>
        <FlexboxLayout class="task-date" row="1" col="0"> 
            <Label [text]="task.START_DATE | slice:0:10 | date:'MMM d, yyyy'"></Label>
            <Label text=" - "></Label>
            <Label [text]="task.END_DATE | slice:0:10 | date:'MMM d, yyyy'"></Label>
        </FlexboxLayout>
        <Label text="&#xf00c;" class="fas task-status" [ngClass]="{'completed' : task.COMPLETED}" rowSpan="2" col="1"></Label>
    </GridLayout>
</ng-template>

Everythign работает до этой точки. Когда пользователь с правами администратора нажимает на одну из задач, чтобы просмотреть детали задачи, я получаю следующую ошибку: 

Error: Uncaught (in promise): TypeError: undefined is not an object (evaluating 'this.currentOutlet.peekState')

Когда я проверяю элементы с помощью инструментов Chrome dev, я вижу, что элемент GridLayout имеет правильный идентификатор, который соответствует задаче, на которую он должен ссылаться 

<GridLayout ng-reflect-params="../task,5e46c219add54" iosOverflowSafeArea="true" classNAme="data-container">

Любая помощь или понимание будет принята с благодарностью. Я относительно новичок в Angular и NativeScript.

РЕДАКТИРОВАТЬ: Вот ссылка на площадку NS, где вы можете увидеть проблему в действии. Я удалил практически все, что не нужно для репликации проблем.

Для репликации:

  1. Войдите в систему с именем пользователя "u1".
  2. Go на вкладку задач и нажмите одну из задач. Вы перейдете к деталям задания.
  3. Нажмите кнопку «Профиль» на панели действий.
  4. На странице профиля введите u2 в поле имени пользователя в разделе «Администратор» и нажмите кнопку олицетворения. Вы вернетесь на панель мониторинга как пользователь 2.
  5. Go на вкладку задач и коснитесь одной из задач.

При нажатии на задачу вы попадете к деталям задачи. но вместо этого выдает ошибку, описанную выше.

ПРИМЕЧАНИЕ. Нажатие на любую из задач на панели мониторинга в любое время не будет работать. Это еще одна проблема, которую я пытаюсь выяснить. Если вы поможете мне разобраться, что я делаю там неправильно, это было бы очень признательно.

...