在Angular中实现向导组件：最优实现方案探讨

针对你用TemplateRef数组渲染向导页面时，子页面无法通知父组件控制下一页按钮状态的问题，下面给出几个更实用的实现方案：

方案一：内容投影 + 子组件@Output事件（推荐） #

把每个步骤封装成独立组件，通过@Output事件向向导父组件传递当前步骤的验证状态，替代直接传递TemplateRef的方式，更易维护且通信清晰。

1. 定义步骤基类（统一规范） #

import { Component, Output, EventEmitter } from '@angular/core';

export abstract class BaseStepComponent {
  @Output() validChange = new EventEmitter<boolean>();
  abstract isValid(): boolean; // 供父组件主动获取当前步骤状态
}

2. 实现子步骤组件 #

以第一步为例，表单验证通过时向父组件发送状态：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { BaseStepComponent } from './base-step.component';

@Component({
  selector: 'app-step-one',
  template: `
    <div class="step-content">
      <h3>第一步：填写基本信息</h3>
      <form [formGroup]="stepForm">
        <label>姓名：</label>
        <input formControlName="fullName" placeholder="请输入姓名">
        <p *ngIf="stepForm.get('fullName')?.invalid && stepForm.get('fullName')?.touched">姓名不能为空</p>
      </form>
    </div>
  `
})
export class StepOneComponent extends BaseStepComponent {
  stepForm: FormGroup;

  constructor(fb: FormBuilder) {
    super();
    this.stepForm = fb.group({
      fullName: ['', Validators.required]
    });

    // 监听表单状态变化，实时通知父组件
    this.stepForm.statusChanges.subscribe(status => {
      this.validChange.emit(status === 'VALID');
    });
  }

  isValid(): boolean {
    return this.stepForm.valid;
  }
}

3. 实现向导父组件 #

通过ViewChildren获取当前步骤组件实例，订阅其状态变化，控制按钮启用：

import { Component, QueryList, ViewChildren, OnDestroy } from '@angular/core';
import { BaseStepComponent } from './base-step.component';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-wizard',
  template: `
    <div class="wizard-wrapper">
      <!-- 渲染当前步骤组件 -->
      <div *ngIf="currentStep < stepComponents.length">
        <ng-container [ngComponentOutlet]="stepComponents[currentStep].constructor"></ng-container>
      </div>

      <!-- 导航按钮区 -->
      <div class="wizard-actions">
        <button (click)="goPrev()" [disabled]="currentStep === 0">上一页</button>
        <button (click)="goNext()" [disabled]="!currentStepValid">下一页</button>
      </div>
    </div>
  `
})
export class WizardComponent implements OnDestroy {
  currentStep = 0;
  currentStepValid = false;
  @ViewChildren(BaseStepComponent) stepComponents!: QueryList<BaseStepComponent>;
  private destroy$ = new Subject<void>();

  ngAfterViewInit(): void {
    // 初始化订阅当前步骤的状态
    this.subscribeToStepValidity();
  }

  goNext(): void {
    if (this.currentStepValid && this.currentStep < this.stepComponents.length - 1) {
      this.currentStep++;
      this.subscribeToStepValidity();
    }
  }

  goPrev(): void {
    if (this.currentStep > 0) {
      this.currentStep--;
      this.subscribeToStepValidity();
    }
  }

  private subscribeToStepValidity(): void {
    const currentStepComp = this.stepComponents.get(this.currentStep);
    if (!currentStepComp) return;

    // 先取消之前的订阅，避免内存泄漏
    currentStepComp.validChange.pipe(takeUntil(this.destroy$)).subscribe(isValid => {
      this.currentStepValid = isValid;
    });
    // 主动获取初始状态
    this.currentStepValid = currentStepComp.isValid();
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

方案二：共享服务实现跨组件通信 #

如果步骤组件层级较深，用共享服务传递状态更灵活，步骤组件更新状态到服务，向导组件监听服务的状态流。

1. 实现向导共享服务 #

import { Injectable, Subject } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class WizardStateService {
  private stepValidity$ = new Subject<{ stepIndex: number; isValid: boolean }>();
  public stepValidityStream$ = this.stepValidity$.asObservable();

  // 更新指定步骤的验证状态
  updateStepValidity(stepIndex: number, isValid: boolean): void {
    this.stepValidity$.next({ stepIndex, isValid });
  }
}

2. 子步骤组件中更新状态 #

// 在子步骤组件的构造函数注入服务
constructor(private wizardStateService: WizardStateService, fb: FormBuilder) {
  this.stepForm = fb.group({...});
  this.stepForm.statusChanges.subscribe(status => {
    // 假设当前是步骤0，根据实际步骤索引调整
    this.wizardStateService.updateStepValidity(0, status === 'VALID');
  });
}

3. 向导组件中监听状态 #

constructor(private wizardStateService: WizardStateService) {
  this.wizardStateService.stepValidityStream$.subscribe(({ stepIndex, isValid }) => {
    if (stepIndex === this.currentStep) {
      this.currentStepValid = isValid;
    }
  });
}

方案三：嵌套FormGroup（表单驱动场景） #

如果整个向导是一个完整的表单，可以用嵌套FormGroup管理每个步骤的表单，向导组件直接通过表单状态控制按钮，无需额外事件传递。

向导组件核心代码 #

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-form-wizard',
  template: `
    <form [formGroup]="wizardForm">
      <!-- 步骤1 -->
      <div *ngIf="currentStep === 0" formGroupName="step1">
        <input formControlName="name" placeholder="姓名">
      </div>
      <!-- 步骤2 -->
      <div *ngIf="currentStep === 1" formGroupName="step2">
        <input formControlName="email" placeholder="邮箱">
      </div>

      <div class="actions">
        <button (click)="goPrev()" [disabled]="currentStep === 0">上一页</button>
        <button (click)="goNext()" [disabled]="!getCurrentStepForm()?.valid">下一页</button>
      </div>
    </form>
  `
})
export class FormWizardComponent {
  wizardForm: FormGroup;
  currentStep = 0;

  constructor(fb: FormBuilder) {
    this.wizardForm = fb.group({
      step1: fb.group({ name: ['', Validators.required] }),
      step2: fb.group({ email: ['', [Validators.required, Validators.email]] })
    });
  }

  getCurrentStepForm(): FormGroup | null {
    return this.wizardForm.get(`step${this.currentStep + 1}`) as FormGroup || null;
  }

  goNext(): void {
    if (this.getCurrentStepForm()?.valid && this.currentStep < 1) {
      this.currentStep++;
    }
  }

  goPrev(): void {
    if (this.currentStep > 0) {
      this.currentStep--;
    }
  }
}

方案对比 #

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