创建行为类似于ng-container的Angular组件

Question

一个Angular组件怎么能像<ng-container>那样，最终只在DOM中找到它的内容呢?特别是，如果本身是用内容编写的，那么内容应该在模板的插槽中结束，例如，假设模板基本上是:

<my-toolbar>
<ion-toolbar></ion-toolbar>
</my-toolbar>

HTML就像

<my-toolbar>
<span>stuff</span>
</my-toolbar>

那么渲染后的DOM应该是

<ion-toolbar>
<slot>#ref to span below<slot>
<span>stuff</span>
</ion-toolbar>

。<my-toolbar>主机元素不在位。这有可能吗?

尝试到目前为止:几个类似听起来的问题有答案，如使用一个属性选择器，如[my-toolbar]，然后写<ion-toolbar my-toolbar>，但然后角抱怨ion-toolbar匹配多个选择器，我猜默认和[my-toobar]。

Answer 1

在my-toolbar组件模板中，您应该添加<ng-content></ng-content>

my-toolbar.component.html

<ion-toolbar>
<ng-content></ng-content>
<div>static div</div>
</ion-toolbar>

用法:

<my-toolbar>
<span>some text</span>
</my-toolbar>

结果:

<ion-toolbar>
<span>some text</span>
<div>static div</div>
</ion-toolbar>