Angular 5页面跳转后数据绑定失效问题求助

我之前处理过类似的Angular路由跳转后数据不绑定的问题，咱们来一步步排查和解决：

最可能的原因：异步请求未完成就跳转 #

看你create.component.ts里的onSubmit方法，你在调用addSettle接口之后立刻执行了路由跳转，但HTTP请求是异步的——也就是说，当你跳转到settle页面时，后端可能还没完成新数据的存储，这时候settle.component调用getSettle接口就拿不到数据，自然绑定失效；而刷新页面时，之前的addSettle请求已经完成，数据已经存在，所以绑定恢复正常。

解决方案：把路由跳转放到接口回调里 #

修改create.component.ts的onSubmit方法，确保只有当addSettle请求成功完成后，再执行路由跳转：

onSubmit() {
  this.model.token = UUID.UUID();
  this.settleService
    .addSettle(this.model)
    .subscribe(settle => {
      this.settles.push(settle);
      // 把跳转逻辑移到订阅成功的回调中，确保数据已存入后端
      this.router
        .navigate([`settle`, this.model.token])
        .then(() => console.log(`Redirection to settle details made!`));
    });
  this.submitted = true;
}

备选方案：手动触发变更检测（如果上述方法无效） #

如果调整跳转时机后还是有问题，可能是Angular的变更检测没有自动触发。这时候可以手动触发变更检测：

1. 在settle.component.ts中注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

constructor(
  private route: ActivatedRoute,
  private settleService: SettleService,
  private cdr: ChangeDetectorRef // 注入变更检测器
) {}

2. 在getSettle的订阅回调中手动触发检测：

getSettle(): void {
  const token = this.route.snapshot.paramMap.get('id');
  this.settleService
    .getSettle(token)
    .subscribe(settle => {
      this.settle = settle;
      this.cdr.detectChanges(); // 手动通知Angular更新视图
    }, null, () => this.BindEditUrl());
}

额外说明：路由参数获取的正确性 #

你用this.route.snapshot.paramMap.get('id')获取路由参数是没问题的，因为是从create页面跳转到新的settle组件，不是同组件内路由参数变化，所以快照方式完全适用。

内容的提问来源于stack exchange，提问作者tzm