如何在Angular中实现带标签页的导航栏？不跳转且保留表单数据

针对长表单的标签页导航需求——无需路由跳转、保持表单数据不丢失，这两种方案是最实用的：

1. 用 Angular Material Tabs（推荐） #

Angular Material 的 mat-tab-group 是官方维护的组件，开箱即用，适配表单场景的各种细节（比如标签切换时的状态保留、无障碍支持）。

实现步骤： #

• 安装 Angular Material（未安装时执行）：

  ng add @angular/material
  

• 在模块中导入 MatTabsModule：

  import { MatTabsModule } from '@angular/material/tabs';
  
  @NgModule({
    imports: [MatTabsModule]
  })
  export class YourFormModule { }
  

• 父组件模板中编写标签组，将表单各分区作为子组件嵌入到 mat-tab 中：

  <mat-tab-group [selectedIndex]="activeTabIndex">
    <mat-tab label="基本信息">
      <app-basic-info [(formData)]="formData"></app-basic-info>
    </mat-tab>
    <mat-tab label="详细资料">
      <app-detail-info [(formData)]="formData"></app-detail-info>
    </mat-tab>
    <mat-tab label="确认提交">
      <app-confirm [(formData)]="formData"></app-confirm>
    </mat-tab>
  </mat-tab-group>
  

• 父组件维护全局表单数据对象，通过双向绑定传递给所有子组件：

  export class ParentFormComponent {
    formData = {
      name: '',
      age: null,
      // 其他表单字段
    };
    activeTabIndex = 0;
  }
  

关键优势：

• 所有子组件始终存在于DOM中（默认配置），不会因标签切换销毁，表单数据天然保留。
• 内置标签切换动画、响应式布局，无需手动编写样式逻辑。

2. 手动实现标签栏（无第三方依赖） #

若不想引入Material库，原生实现标签栏也很简单，核心是通过状态控制组件的显示/隐藏。

实现步骤： #

• 父组件模板：

  <!-- 标签导航栏 -->
  <div class="tab-nav">
    <button 
      *ngFor="let tab of tabs; let i = index"
      [class.active]="activeTab === i"
      (click)="activeTab = i"
    >
      {{ tab.label }}
    </button>
  </div>
  
  <!-- 标签内容区 -->
  <div class="tab-content">
    <app-basic-info *ngIf="activeTab === 0" [(formData)]="formData"></app-basic-info>
    <app-detail-info *ngIf="activeTab === 1" [(formData)]="formData"></app-detail-info>
    <app-confirm *ngIf="activeTab === 2" [(formData)]="formData"></app-confirm>
  </div>
  

• 父组件逻辑：

  export class ParentFormComponent {
    tabs = [
      { label: '基本信息' },
      { label: '详细资料' },
      { label: '确认提交' }
    ];
    activeTab = 0;
    formData = { /* 表单字段 */ };
  }
  

• 基础样式：

  .tab-nav button {
    padding: 8px 16px;
    border: none;
    background: #eee;
    cursor: pointer;
  }
  .tab-nav button.active {
    background: #1976d2;
    color: white;
  }
  .tab-content {
    padding: 16px;
    border: 1px solid #eee;
  }
  

注意事项：

• 使用 *ngIf 时，切换标签会导致组件销毁重建，需确保表单数据统一存储在父组件或共享服务中，子组件仅负责渲染和修改数据。
• 若想让组件始终保留实例不销毁，可替换 *ngIf 为 [hidden]，仅隐藏DOM节点。

数据保持核心要点 #

无论采用哪种方案，不要让子组件自行存储表单数据，统一将数据放在父组件或全局表单服务中，子组件通过双向绑定或服务订阅读写数据，确保标签切换时数据不会丢失。

内容的提问来源于stack exchange，提问作者I'm still learning