如何使用角度6材料使自定义步进组件可重复使用

Question

我正在使用Angular材料步进器，我的要求是在定制步骤后重用步进器组件。我正在动态加载步骤，因此取决于我想在不同组件中加载步进器的要求。所以我的Senerio是 -

1. 我有OfferComponent，我想在这个组件中动态显示2个步骤。
2. 我有另一个组件DataSource我想动态显示4个staeps。

请在下面找到stackblitz链接示例。

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

Answer 1

为了能够重用组件，首先需要定义将导出该组件的stepper.module.ts。

创建一个如下所示的模块：

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

然后，您可以在模块中声明的每个组件中使用Stepper组件，其中StepperModule是导入的。

例：

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

您可以在LoginComponent中使用StepperComponent，因为LoginComponent是在导入StepperModule的模块中声明的。