当存在嵌套组件时，ng-content 从父范围中嵌入

Question

使用 Angular 2/4，我有一个复杂的页面模板。

假设我有 3 个相互嵌套的组件：page.component、header.component 内部和 header.title.component 内部，并适当设置了自定义选择器。

page.componenthtml模板：

<layout-header></layout-header>
...

header.componenthtml模板：

<section class="dynamic-content" *ngIf="!collapsed" #dynamicContent>
  <layout-header-title></layout-header-title>
  ...
</section>

header.title.componenthtml模板：

<ng-content selector="card-layout-title"></ng-content>

然后，在我的实际页面模板上：

<layout-page>
  <card-layout-title>Title goes here</card-layout-title>
</layout-page>

ng-content selector="card-layout-title" 仅在直接父级是包含要选择的标签的组件时才有效，即从 header.title.component 我无法选择 2-levels-up 嵌套组件来查找要嵌入到 @987654333 中的内容@。

我该怎么做（最好不要添加模板引用并将其传递到每个级别，因为每个级别有 5-10 个嵌套组件）？

Answer 1

我将这些附加信息从@dohpaz42 的答案中分离出来，因为它与一般用例的相关性要低得多。

如果您的层次结构不完全平坦，即

<layout-dyn-page>
  <layout-header>
    <layout-title>Title</layout-title>
    <layout-summary>Summary</layout-summary>
  <layout-header>
</layout-dyn-page>

上述解决方案将不起作用，因为ng-content select= 不会选择不在顶层的元素。当您尝试将它们向下投影时，无论您如何尝试，都将它们与它们的包装标签一起投影，因此目前选择嵌套在标签内的元素似乎是不可能的。您必须将其展平，即

<layout-dyn-page>
  <layout-title>Title</layout-title>
  <layout-summary>Summary</layout-summary>
</layout-dyn-page>

这很可能是 Angular 中的一个错误（或缺少的功能），但目前（没有文档）我们不知道。

Answer 2

首先，它是<ng-content select=".card-layout-title"></ng-content> 而不是<ng-content selector=".card-layout-title"></ng-content>；由于缺乏文档，很容易犯错误。

根据我的测试，似乎在 Angular 2/4 中使用 Transclusion 首先替换了顶级内容，因此当它下降到 ng-content 选择器时，.card-layout-title 元素不再存在。因此，我建议解决此问题的方法是使用嵌套的ng-content 元素将顶级内容“遍历”到链中。 Plunker