复制LandingPage条目后跳转子页面视图未自动刷新问题求助

• 你的路由跳转逻辑是同步执行的，优先级远高于getLandingPageItem、createLandingPageItem两个异步HTTP请求的回调逻辑，你点击按钮后不等复制条目创建完成，就已经跳转到了列表页
• 触发列表刷新的refreshSubject.next()写在创建条目的成功回调中，此时原组件要么已经因跳转销毁导致事件无法发出，要么列表页组件还未完成订阅收不到刷新事件，所以列表不会主动加载最新数据，只有手动刷新时才会重新拉取全量数据展示新条目。

把路由跳转逻辑移动到创建条目成功的回调内，确保条目创建完成、刷新事件发出后再执行跳转，修复后代码如下：

duplicate(){
  this.landingPageService.getLandingPageItem(this.landingPageData.id).subscribe(
    next => {
      this.loading = true;
      const copiedLandingPage = LandingPage.LandingPageFromDefinition(next),
        copyLandingPage = LandingPage.GenerateCreationDTO(
          copiedLandingPage.content,
          `${copiedLandingPage.name} (copy)`
        );
      copyLandingPage.lpType = copiedLandingPage.lpType;
      copyLandingPage.lastUpgraded = copiedLandingPage.lastUpgraded;
      this.landingPageService
        .createLandingPageItem(copyLandingPage)
        .subscribe(
          () => {
            this.toastGenerator.lpContentCreation.success();
            this.refreshSubject.next();
            this.loading = false;
            // 路由跳转移到此处，等待条目创建完成后再跳转
            this.router.navigate(['/landing-page']);
          },
          () => {
            this.loading = false;
            this.toastGenerator.lpContentCreation.failure();
          }
        );
    },
    () => {
      this.toastGenerator.lpContentCreation.failure();
    }
  );
}

对应的触发按钮代码无需修改：

<button  (click)="duplicate()">Kopiuj</button>

如果修改后仍偶发不刷新的情况，可检查refreshSubject的实现：如果是普通Subject，事件发送时订阅方未完成订阅就会丢失事件，可以换成BehaviorSubject，或者直接在列表页的ngOnInit钩子中主动调用拉取列表数据的接口，不需要依赖跨组件事件触发刷新。

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