如何使用 Angular 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 { }

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

示例：

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

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