如何仅从名称中获取组件对象

Question

我有这个代码

<div>
    <wizard-step
    [component]="'ExampleComponent'"
  ></wizard-step>
</div>

ExampleComponent 是我想在组件中提取的一个组件，但是在使用组件变量时，结果是一个字符串，我想从该名称中获取 Component 对象。

感谢您的帮助。

Answer 1

如果您想将组件作为对象引用传递给子组件，您可以使用 https://angular.io/api/core/ViewChild 在组件中检索它

@ViewChild(ExampleComponent) exampleComponent: ExampleComponent;

然后在你的模板中你会像这样传递它

<div>
  <wizard-step [component]="exampleComponent"></wizard-step>
</div>

Answer 2

对于您的问题，我想到了两个选项。您要么创建一个辅助变量，要么按照@dmance 的建议使用ng-content。

选项 1 - 辅助变量

您需要一个辅助变量，因为 HTML 无法访问导入，因此您需要一个“代理”来访问组件

TS

exampleComponent: Type<ExampleComponent> = ExampleComponent;

HTML

<div>
  <wizard-step [component]="exampleComponent"></wizard-step>
</div>

选项 2 - ng-content

内容投影很有帮助，例如，当每个组件中的内容发生变化并且您不想向组件添加大量输入时。

HTML

<div>
  <wizard-step>
    <example-component></example-component>
  </wizard-step>
</div>

但是你需要调整你的wizard.component.html:

<!-- Some HTML -->
...
<div>
  <ng-content></ng-content> 
  <!-- Your component is rendered here => ng-content is the anchor -->
</div>
...
<!-- SOME HTML -->

如果您使用此选项，则您的 Typescript 文件中不需要 @Input。如需更多信息，请参阅docs。