Angular 13页面重载后如何停留在当前操作的标签页

我搭建了带多标签页的侧边栏，展示效果如下：

• ToDoList标签页内放置了提交表单，点击提交按钮后页面会触发重载
• 现存问题：页面重载后会自动跳转至默认的Dashboard标签页，无法停留在承载表单的Todolist标签页，需要实现重载后定位到原操作标签页的效果

当前表单提交实现代码如下：

onSubmit() {
  console.log(this.form.value);
  if (this.form.valid) {
    this.service.createform(this.form.value);
    setTimeout(() => {
      this.router.navigate(['/dashboard/todolist']);
    }, 1000);
  }
}

你写的setTimeout路由跳转逻辑不生效，核心原因是表单提交触发的整页重载会中断前端路由的跳转执行，整页重载后Angular应用会重新初始化，标签页组件默认读取初始配置的默认激活项（也就是Dashboard），所以才会跳回默认页。以下两种方案可按需选择：

方案1：阻止表单默认整页提交，走前端局部交互逻辑（推荐） #

Angular表单如果没有正确绑定ngSubmit、未阻止原生提交事件，就会触发浏览器原生的整页提交行为。首先修改表单模板，绑定Angular的提交事件：

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <!-- 移除原生action属性，所有提交逻辑走onSubmit方法 -->
</form>

接着修改提交逻辑，去掉不可靠的setTimeout，等接口返回成功后再执行路由跳转，同时把当前激活标签的状态存在本地存储，避免偶发重载丢失状态：

onSubmit() {
  console.log(this.form.value);
  if (this.form.valid) {
    this.service.createform(this.form.value).subscribe({
      next: () => {
        // 存储当前激活标签标识，应用初始化时优先读取
        localStorage.setItem('activeTab', 'todolist');
        this.router.navigate(['/dashboard/todolist']);
        // 可追加提交成功逻辑，比如重置表单、弹出成功提示
        this.form.reset();
      }
    });
  }
}

最后在侧边栏标签组件的初始化钩子ngOnInit中，优先读取本地存储的标签值，没有存储值时再回退到默认的Dashboard标签：

ngOnInit(): void {
  const savedActiveTab = localStorage.getItem('activeTab');
  this.activeTab = savedActiveTab || 'dashboard';
}

记得在手动切换标签的逻辑里，同步更新本地存储的activeTab值，后续不管是手动刷新页面还是提交操作触发重载，都会自动停留在最后操作的标签页。

方案2：若业务必须保留整页重载，通过URL查询参数传递标签状态 #

如果你的场景要求提交后必须整页重载，可以在跳转地址上拼接查询参数标记当前激活标签，页面初始化时读取参数设置激活项即可。
提交逻辑修改为：

onSubmit() {
  console.log(this.form.value);
  if (this.form.valid) {
    this.service.createform(this.form.value);
    // 携带激活标签参数跳转
    window.location.href = '/dashboard/todolist?activeTab=todolist';
  }
}

侧边栏组件初始化时，从当前路由的查询参数中解析activeTab值，设置为当前激活项即可。

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