javascript - 将 html 作为输入传递给 Angular 组件

Question

我想创建一个app-my-component组件，可以通过以下方式使用：

<app-my-component>
    <div>Some element inside</div>
</app-my-component>

然后我想在里面使用那个组件/html元素app-my-component，像这样：

<p>You provided this element as parameter:</p>

<ng-template [ngTemplateOutlet]="inputElement"></ng-template>

这怎么可能？我找不到任何关于此的文档，但我曾经看到使用此功能的代码，所以我希望它仍然是可能的。

---

我在课堂上添加了这个MyComponent：

@ContentChild(TemplateRef)
public inputElement: TemplateRef;

但是该元素没有出现。

标签： javascriptangular

Answer 1

尝试使用这样的东西。它称为内容投影

<!-- inside container / app-my-component component -->
<ng-content select="slot-one"></ng-content>

<!-- inside another component using container component -->
<app-my-component>
  <slot-one>Some element inside</slot-one>
</app-my-component>