angular - 在嵌套组件中链接包含

Question

我有以下嵌套组件结构。

<app-root>
    <app-comp-1>
      <app-comp-2>
      </app-comp-2>
   </app-comp-1>
  <app-root>

我想将任何内容嵌入到最后一个子项 (app-comp-2) 中。所以，我需要这样的东西。

<app-comp-1>
    <app-comp-2>
        <ng-content></ng-content>
    </app-comp-2>
</app-comp-1>

但是在 app-root 组件中只有 app-comp-1 组件可用。所以，这是我必须嵌入我的内容的地方。

<app-root>
    <app-comp-1>
        <content-I-want-to-transclude></content-I-want-to-transclude>
    </app-comp-1>
</app-root>
 ---------------------------
<app-comp-1>
    <ng-content></ng-content>
    <app-comp-2>
        ...
    </app-comp-2>
</app-comp-1>

所以我需要一个解决方案来获取已嵌入到第一个组件中的内容并将其传递给第二个组件。

Plunker

Answer 1

This Github issue使用 ngProjectAs 属性为这个问题提供了一个很好的解决方案。

在有 2 层内容投影的情况下，第一层使用带有 ngProjectAs 属性的 ng-content 元素，以及下一个选择器。

第二层使用另一个ng-content，并选择第一层的ngProjectAs属性的值:

一级(父组件):

<ng-content select="my-component" ngProjectAs="arbitrary-selector"></ng-content>

第 2 级(嵌套子组件):

<ng-content select="arbitrary-selector"></ng-content>

---

用法:

<my-app>
  <my-component>My Projected Content</my-component>
</my-app>

结果 DOM:

<my-app>
  <my-component>
      <nested-component>My Projected Content</nested-component>
  </my-component>
</my-app>