PrimeNG p-step分步组件分步启用与禁用实现咨询

针对动态生成步骤+路由加载独立组件的场景，Input/Output父子传值无法生效，最可靠的方式是通过Angular服务跨组件共享步骤状态，结合PrimeNG Steps组件的disabled属性精准控制步骤可用性。

步骤1：创建步骤状态管理服务 #

这个服务负责维护所有步骤的启用状态，提供状态初始化、更新方法，让路由组件和父组件能共享状态：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class StepStateService {
  // 存储步骤禁用状态：key为步骤唯一标识（如路由path），value为是否禁用
  private stepDisabledState$ = new BehaviorSubject<Record<string, boolean>>({});
  stepDisabledState = this.stepDisabledState$.asObservable();

  // 初始化步骤状态：默认仅第一个步骤启用，其余禁用
  initStepStates(stepList: any[]) {
    const initialState: Record<string, boolean> = {};
    stepList.forEach((step, index) => {
      // 假设步骤model中用routerLink作为唯一标识，可根据实际替换为id等字段
      initialState[step.routerLink] = index !== 0;
    });
    this.stepDisabledState$.next(initialState);
  }

  // 完成当前步骤后，启用下一个步骤
  enableNextStep(currentStepLink: string, stepList: any[]) {
    const currentState = { ...this.stepDisabledState$.value };
    const currentIndex = stepList.findIndex(step => step.routerLink === currentStepLink);
    if (currentIndex !== -1 && currentIndex < stepList.length - 1) {
      const nextStepLink = stepList[currentIndex + 1].routerLink;
      currentState[nextStepLink] = false;
      this.stepDisabledState$.next(currentState);
    }
  }

  // 获取指定步骤的禁用状态
  isStepDisabled(stepLink: string): boolean {
    return this.stepDisabledState$.value[stepLink] ?? true;
  }
}

步骤2：修改父组件，结合服务状态动态生成步骤属性 #

在父组件中订阅服务状态，给后端返回的menuData每个步骤添加disabled属性，同时初始化服务状态：

import { Component, OnInit } from '@angular/core';
import { StepStateService } from './step-state.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-step-container',
  templateUrl: './step-container.component.html'
})
export class StepContainerComponent implements OnInit {
  menuItem$: Observable<any[]>;
  isLoading = false;
  processedMenuData: any[] = [];

  constructor(private stepStateService: StepStateService) {}

  ngOnInit(): void {
    this.menuItem$.subscribe(menuData => {
      if (menuData?.length) {
        // 初始化步骤状态
        this.stepStateService.initStepStates(menuData);
        // 订阅状态变化，实时更新步骤的disabled属性
        this.stepStateService.stepDisabledState.subscribe(state => {
          this.processedMenuData = menuData.map(step => ({
            ...step,
            disabled: state[step.routerLink] ?? true
          }));
        });
      }
    });
  }
}

修改父组件模板，使用处理后的processedMenuData作为Steps组件的数据源：

<ng-container *ngIf="!isLoading else loading">
  <ng-container *ngIf="menuItem$ | async as menuData">
    <ng-container *ngIf="menuData != null && menuData.length > 0; else reviewNotStarted" >
      <p-steps [model]="processedMenuData" [readonly]="false" data-cy="menu">
      </p-steps>
      <div class="container">
        <router-outlet></router-outlet>
      </div>
    </ng-container>
  </ng-container>
</ng-container>

步骤3：在路由表单组件中更新步骤状态 #

每个路由页面的表单提交成功后，调用服务方法启用下一个步骤：

import { Component } from '@angular/core';
import { StepStateService } from '../step-state.service';
import { ActivatedRoute, Router } from '@angular/router';
import { MenuDataService } from '../menu-data.service'; // 假设你有获取步骤列表的服务

@Component({
  selector: 'app-step-one',
  templateUrl: './step-one.component.html'
})
export class StepOneComponent {
  constructor(
    private stepStateService: StepStateService,
    private router: Router,
    private menuDataService: MenuDataService
  ) {}

  onFormSubmit() {
    // 执行表单提交逻辑（如调用后端接口保存数据）
    // ...

    // 提交成功后，启用下一个步骤
    this.menuDataService.getMenuData().subscribe(menuData => {
      const currentRoute = this.router.url;
      this.stepStateService.enableNextStep(currentRoute, menuData);
      // 可选：自动跳转到下一个步骤
      const currentIndex = menuData.findIndex(step => step.routerLink === currentRoute);
      if (currentIndex < menuData.length - 1) {
        this.router.navigate([menuData[currentIndex + 1].routerLink]);
      }
    });
  }
}

步骤4：添加路由守卫防止非法访问 #

避免用户手动输入URL跳转到未启用的步骤，添加CanActivate路由守卫：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { StepStateService } from './step-state.service';
import { MenuDataService } from './menu-data.service';

@Injectable({ providedIn: 'root' })
export class StepGuard implements CanActivate {
  constructor(
    private stepStateService: StepStateService,
    private menuDataService: MenuDataService,
    private router: Router
  ) {}

  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    const menuData = await this.menuDataService.getMenuData().toPromise();
    const targetRoute = state.url;
    const isDisabled = this.stepStateService.isStepDisabled(targetRoute);

    if (isDisabled) {
      // 跳转到第一个可用的步骤
      const firstEnabledStep = menuData.find(step => !this.stepStateService.isStepDisabled(step.routerLink));
      if (firstEnabledStep) {
        this.router.navigate([firstEnabledStep.routerLink]);
      }
      return false;
    }
    return true;
  }
}

在路由配置中添加守卫：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { StepOneComponent } from './step-one.component';
import { StepTwoComponent } from './step-two.component';
import { StepGuard } from './step.guard';

const routes: Routes = [
  { path: 'step-one', component: StepOneComponent, canActivate: [StepGuard] },
  { path: 'step-two', component: StepTwoComponent, canActivate: [StepGuard] },
  // 其他步骤路由...
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class StepRoutingModule {}

关键说明 #

• 确保后端返回的menuData每个步骤包含唯一标识（如routerLink、id），用于匹配路由和步骤状态。
• 若需持久化步骤状态（如页面刷新后不丢失），可在服务中结合localStorage存储状态。
• p-steps的readonly设为false，通过disabled属性控制步骤是否可点击，完全符合需求。

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