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

Question

我正在使用Angular材质步进器，我的要求是在自定义步骤以重用步进器组件之后。我正在动态加载步进，因此取决于我要在其他组件中加载步进器的要求。所以我的Senerio是-

1. 我有OfferComponent，我想动态显示2个步骤 在此组件中。

2. 我有另一个组件DataSource并且我想要     动态显示4个工作人员。

请在下面的示例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 { }

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

示例：

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

由于LoginComponent在导入StepperModule的模块中声明，因此可以在LoginComponent中使用StepperComponent。