探索 Angular Material Stepper 以组件为输入的可能性

Question

我是 angular 的新手，我一直在玩 Stepper function。

问题陈述：

我正在尝试创建一个 Stepper 高阶组件，它将接受组件作为输入（对于每个步骤）并呈现。

目标是我将能够传入各种组件并渲染它们。

https://material.angular.io/components/stepper/overview

angular 可以吗？ 我真的很感激一些光。 我试着查看文档但迷路了。

谢谢

Answer 1

您所说的是将组件动态加载到您的 Stepper 中。

您只需要知道要动态呈现的组件的ComponentType以及将它们传递给组件的方法。 我建议将@Input与ComponentType<any>[]一起使用。

// your.component.ts
@Input() components: ComponentType<any>[];

<!-- your.component.html -->
<mat-stepper>
  <mat-step *ngFor="let component of components">
    <ng-container *ngComponentOutlet="component"></ng-container>
  </mat-step>
</mat-stepper>

瞧，你已经动态渲染了你的组件。

要了解更多信息： https://angular.io/api/common/NgComponentOutlet

此外，如果您需要对输入和输出的支持，这里有一个很棒的库： https://www.npmjs.com/package/ng-dynamic-component