Question

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

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

然后我想像这样在app-my-component内使用component / html元素：

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

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

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

我将此添加到了MyComponent类中：

@ContentChild(TemplateRef)
public inputElement: TemplateRef;

但是该元素没有出现。

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>

Answer 2

在父组件中，将所有投影元素像这样包装在ng-template中

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

Working Example

将html作为输入传递给角度组件

2 个答案: