angular - 创建行为类似于 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匹配多个选择器，我猜是默认的 and [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>