ng-当存在嵌套组件时，从父范围转换的内容

Question

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

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

page.component html模板：

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

header.component html模板：

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

header.title.component html模板：

<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级嵌套组件，以找到要转换为card-layout-title的内容。

我如何做到这一点(最好不向每个级别添加和传递模板引用，因为每个级别都有5-10个嵌套组件)？

Answer 1

首先，它是<ng-content select=".card-layout-title"></ng-content>而不是<ng-content selector=".card-layout-title"></ng-content>；考虑到缺乏文档，很容易出错。

从我的测试来看，使用Transclusion角2/4首先取代顶级内容，因此当它到达ng-content选择器时，.card-layout-title元素就不再存在了。因此，我建议解决这个问题的方法是使用嵌套的ng-content元素“遍历”顶级内容。柱塞

Answer 2

我将这个附加信息从@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>

这很可能是一个错误(或缺少功能)的角度，但目前(没有文档)，我们无法知道。