创建行为类似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>，然后angular抱怨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>