如何使用组件而不是html作为Angular CLI中另一个组件插槽的内容？

我想使用外部组件扩展为内部组件，而不是html内容，这样外部可以使用插槽逻辑解析内部的内容

下面是一些代码：

outer.component.html

<button>
  <ng-content select="h1"></ng-content>
</button>
<button>
  <ng-content select="h2"></ng-content>
</button>
<button>
  <ng-content></ng-content>
</button>

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>

<app-outer>
  <app-inner></app-inner>
</app-outer>

<app-outer>
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
</app-outer>

<app-outer>
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
</app-outer>

<app-inner></app-inner>

这是我们的外部组件，当使用它时，它希望有

标签和另一个扩展的内容

internal.component.html

<button>
  <ng-content select="h1"></ng-content>
</button>
<button>
  <ng-content select="h2"></ng-content>
</button>
<button>
  <ng-content></ng-content>
</button>

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>

<app-outer>
  <app-inner></app-inner>
</app-outer>

<app-outer>
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
</app-outer>

<app-outer>
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
</app-outer>

<app-inner></app-inner>

h1
氢
h3

这是内部组件，它实际上具有

标记和
标记，作为外部组件的另一个内容

现在我们要这样使用它：

app.component.html

<button>
  <ng-content select="h1"></ng-content>
</button>
<button>
  <ng-content select="h2"></ng-content>
</button>
<button>
  <ng-content></ng-content>
</button>

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>

<app-outer>
  <app-inner></app-inner>
</app-outer>

<app-outer>
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
</app-outer>

<app-outer>
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
</app-outer>

<app-inner></app-inner>



在本例中，我们得到两个第一个空按钮，第三个按钮的内容包含整个内部组件。因此，如果我这样做，我期望的行为是：

app.component.html

<button>
  <ng-content select="h1"></ng-content>
</button>
<button>
  <ng-content select="h2"></ng-content>
</button>
<button>
  <ng-content></ng-content>
</button>

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>

<app-outer>
  <app-inner></app-inner>
</app-outer>

<app-outer>
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
</app-outer>

<app-outer>
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
</app-outer>

<app-inner></app-inner>


h1
氢
h3

然后，
outer.component
中的每个按钮将有一个
h
标记我们在示例中需要的内容

那么，我如何才能告诉外部组件以正确的方式覆盖内部组件呢？
提到这一点，用这种方式无法解决

解决此问题的一种方法是在内部组件中使用外部组件：

outer.component.html保持不变

internal.component.html

<button>
  <ng-content select="h1"></ng-content>
</button>
<button>
  <ng-content select="h2"></ng-content>
</button>
<button>
  <ng-content></ng-content>
</button>

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>

<app-outer>
  <app-inner></app-inner>
</app-outer>

<app-outer>
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
</app-outer>

<app-outer>
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
</app-outer>

<app-inner></app-inner>


h1
氢
h3

app.component.html

<button>
  <ng-content select="h1"></ng-content>
</button>
<button>
  <ng-content select="h2"></ng-content>
</button>
<button>
  <ng-content></ng-content>
</button>

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>

<app-outer>
  <app-inner></app-inner>
</app-outer>

<app-outer>
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
</app-outer>

<app-outer>
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
</app-outer>

<app-inner></app-inner>