Блог

Я использую шаговый компонент Angular material, мое требование заключается в том, чтобы после настройки шагов повторно использовать шаговый компонент. Я загружаю step динамически, поэтому зависит от требования, которое я хочу загрузить stepper в другом компоненте. итак, мои Senerio —

1. У меня есть OfferComponent, и я хочу динамически отображать 2 шага в этом компоненте.

2. У меня есть другой источник данных компонента, и я хочу динамически отображать 4 этапа.

пожалуйста, найдите ниже ссылку на stackblitz с примером.

https://stackblitz.com/edit/angular-material-stepper212?file=main.ts

Чтобы иметь возможность повторно использовать компонент, сначала нужно определить, stepper.module.ts который будет экспортировать этот компонент.

Создайте модуль, который будет выглядеть следующим образом:

 @NgModule({
  declarations: [StepperComponent],
  imports: [
    CommonModule,
  ],
  exports: [StepperComponent]
})
export class StepperModule { }
  

Затем вы можете использовать шаговый компонент в каждом компоненте, объявленном в модуле, куда импортирован StepperModule.

Пример:

 @NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    StepperModule
  ]
})
export class LoginModule { }
  

Вы можете использовать StepperComponent в LoginComponent, поскольку LoginComponent объявлен в модуле, куда импортируется StepperModule.