nativescript - 更改应用程序上下文后的 NativeScript Angular 路由错误

Question

对于接下来的冗长解释，我一开始就道歉。我认为有必要充分解释发生了什么。

我按照此处的文章将我的 NS 应用程序设置为使用带有登录屏幕的选项卡式导航。该应用程序的整体结构与此处git repo 中的应用程序结构相同。

我有 3 个选项卡，而不是 git repo 中的玩家和团队：仪表板、顾问和任务。任务组件使用任务服务通过 API 调用为用户获取任务，然后显示任务列表。用户可以点击任务以查看任务详细信息。我使用由所有组件导入的名为 Global 的类来存储上下文信息，例如用户名和身份验证后获取的 API 令牌。

我用配置文件组件替换了欢迎组件，其想法是在 ActionBar 中显示配置文件按钮，并且用户可以从选项卡视图中的任何位置点击配置文件按钮以查看配置文件页面。我通过在每个选项卡组件中包含以下代码来实现这一点：

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>

到目前为止，一切都有效。当管理员用户点击其中一项任务以查看任务详细信息时，我收到以下错误：

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

当我使用 Chrome 开发工具检查元素时，我可以看到 GridLayout 元素具有与它应该链接到的任务相匹配的正确 ID

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

任何帮助或见解将不胜感激。我对 Angular 和 NativeScript 都比较陌生。

编辑：这是一个 NS 操场的链接，您可以在其中看到问题的实际情况。我已经删除了复制问题所不需要的所有内容。

要复制：

1. 使用用户名“u1”登录。
2. 转到任务选项卡并点击其中一项任务。您将被带到任务详细信息。
3. 点击活动栏上的个人资料按钮。
4. 在个人资料页面上，在管理员下的用户名字段中输入 u2，然后点击模拟按钮。您将作为 user2 返回到仪表板。
5. 转到任务选项卡并点击其中一项任务。

点击任务应该会将您带到任务详细信息，但它会产生上述错误。

注意：在任何时候点击仪表板上的任何任务都将不起作用。这是我试图弄清楚的另一个问题。如果你能帮助我找出我在那里做错了什么，那将不胜感激。

标签： nativescriptangular2-nativescript