[英]Pass html as an input to an angular component
I would like to create an app-my-component
component, which can be used in the following way:我想创建一个app-my-component
组件,可以通过以下方式使用它:
<app-my-component>
<div>Some element inside</div>
</app-my-component>
Then I would like to use that component/html element inside the app-my-component
, like this:然后我想在app-my-component
中使用该 component/html 元素,如下所示:
<p>You provided this element as parameter:</p>
<ng-template [ngTemplateOutlet]="inputElement"></ng-template>
How is it possible?这怎么可能? I was not able to find any documentation about this, but I once saw a code using this feature, so I hope it is still possible.我找不到任何关于此的文档,但我曾经看到使用此功能的代码,所以我希望它仍然是可能的。
I added this to the MyComponent
class:我将此添加到MyComponent
class:
@ContentChild(TemplateRef)
public inputElement: TemplateRef;
But the element does not appear.但是该元素没有出现。
Try using something like this.尝试使用这样的东西。 Its called content projection它称为内容投影
<!-- 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>
In parent component, wrap all the projected element inside ng-template like this在父组件中,像这样将所有投影元素包装在 ng-template 中
<app-my-component>
<ng-template>
<div>Some element inside</div>
</ng-template>
</app-my-component>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.