Angular/TypeScript插入新条目后onSaveSuccess重定向到CREATE_PAGE问题问询

问题原因 #

你的代码不生效核心有两个问题：

1. location.reload() 执行后会立刻刷新整个页面，后续的 window.open() 代码完全不会执行
2. 单页应用场景下直接使用原生 window.open、href 跳转绕开了Angular路由管控，要么会被浏览器拦截弹窗，要么会破坏应用内存状态，不符合在当前页停留的需求

可行解决方案 #

1. 基础方案（仅保留在当前创建页、重置表单用于下一次新增）

直接删除 location.reload() 和 window.open('working-order-items-create') 两行无效代码，补充表单重置逻辑即可，修改后if分支代码如下：

if (this.isCreatePage) {
  console.log('IS CREATE');
  this.workingOrderItemsService.changeSelectedWorkingOrderItemsEmitter.emit();
  this.workingOrderItemsService.changePageTypeEmitter.emit(CREATE_PAGE);
  // 重置绑定的实体对象和表单
  this.workingOrderItems = {} as WorkingOrderItems;
  // 如果你用了Angular响应式表单，加上这行清空表单输入
  // this.yourFormGroupName.reset();
}

你已经触发了修改页面类型的事件，只要监听该事件的侧逻辑正常，页面会保持在CREATE_PAGE状态，不需要额外跳转。

2. 路由跳转方案（需要清空当前路由参数、重置创建页状态）

如果你的创建页路由带有残留参数需要清空，用Angular官方提供的Router服务跳转，不要用原生跳转方法，代码示例：

if (this.isCreatePage) {
  console.log('IS CREATE');
  this.workingOrderItemsService.changeSelectedWorkingOrderItemsEmitter.emit();
  this.workingOrderItemsService.changePageTypeEmitter.emit(CREATE_PAGE);
  this.workingOrderItems = {} as WorkingOrderItems;
  // 走Angular路由跳转到创建页
  this.router.navigate(['/working-order-items-create'], {
    replaceUrl: true, // 替换浏览器历史记录，避免后退回到提交前的状态
    queryParams: {
      activeTab: this.tabName,
      tabMode: CREATE_PAGE
    }
  });
}

注意跳转路径要和你路由配置里的创建页路径完全匹配，绝对路径需要加/前缀。

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