动态值的 RouterLink 问题（加载时间问题？）答案

【问题标题】：RouterLink problem with dynamic values ( load timing issue? )动态值的 RouterLink 问题（加载时间问题？）
【发布时间】：2019-10-30 13:59:53
【问题描述】：

我有一个 IONIC-4 / Angular 7 项目，带有以下routerLink；

<p>{{ data?.name }}</p>
<ion-button [routerLink]="['/', 'tabs', 'projects', data?.name]">Configure Project</ion-button>

在运行页面中，第一个 {{ data?.name }} 看起来不错，但在 routerLink 中，它的计算结果为 undefined。

我怀疑这是加载时间问题，即在模板渲染的第一遍中，数据尚未加载，所以它是 undefined，而在第二遍中一切都很好。但是routerLink 没有获取更新的数据。

必须有更好的负载方法吗？数据来自 REST API，如下所示-

在page.ts中；

data: any;

ngOnInit() {

    this.projectService.getProject(this.id)
      .subscribe((res) => {
        this.data = res; 
      });

}

底层projectService使用API；

getProject(id: string): Observable<any> { 

  return this.http
    .get(`${this.endpointUrl}/${id}`);

}

谢谢！

【问题讨论】：

标签： angular ionic-framework routing angular2-routing ionic4

【解决方案1】：

你能不能试试下面的 -

请检查您的 @Component 装饰器是否设置了以下属性 - changeDetection: ChangeDetectionStrategy.OnPush - 如果已设置，则删除 changeDetection 属性及其值并尝试您的代码。
希望它应该工作。如果它不起作用或@Component 没有设置changeDetection 属性，请像这样更新您的代码-

data$: Observable<any>; ngOnInit() { this.data$ = this.projectService.getProject(this.id); }

像这样更新你的模板 -

<ng-container *ngIf="data$ | async as data">
    <ion-button [routerLink]="['/', 'tabs', 'projects', data.name]">Configure Project</ion-button>
 </ng-container>

【讨论】：

感谢@user- on #1，不，@Component 页面上没有设置 changeDetection 属性。在 #2 上，非常有趣，我之前没有见过 data$ 变量声明。我会对此进行调查以更好地理解它。我一直在避免Observables，因为它们似乎使我的创建和更新 UI 模式复杂化，至少我还没有找到一种将数据推送到 Observable 对象的好方法但是，出于某种原因，经过几个小时的尝试调试后，问题突然消失了。我想知道是否有可能在构建的文件中“卡住”了一些东西？
@Memetican $ 后面的变量只是说这个变量是一个 Observable。我建议使用 Observables，因为它是 Angular 的核心。如果你引用 async 管道 [angular.io/api/common/AsyncPipe]，那么你会发现 Angular 团队做了很棒的工作，通过使用 async 管道自动订阅/取消订阅 observable。

【解决方案2】：

我无法解释原因，但在尝试了几个小时的不同方法后，routerLink 问题消失了，目前正在按预期工作。

我的工作设计保持不变，除了因为data 是异步加载的，我正在使用*ngIf 预先检查加载。

data 必须在我允许 Angular 尝试构建 routerLink 之前填充。

<ion-button *ngIf="data" [routerLink]="['/', 'tabs', 'projects', 'edit', data?._id]">Configure Project</ion-button>

【讨论】：