Question

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

假设我有3个相互嵌套的组件：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。

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

Answer 1

首先，它是<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

Answer 2

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

如果你的heirarchy 不完全平坦，即

<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>

这很可能是角度中的错误（或缺失的功能），但是现在（没有文档）我们无法知道。

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

2 个答案: