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

Question

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

假设我有 3 个相互嵌套的组件：page.component，在 header.component 内部和 header.title.component 内部，自定义 select 或适当设置。

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" 仅当直接父级是内部标签为 select 的组件时才有效，即从 header.title.component 我无法 select 2 级-up 嵌套组件以查找要嵌入到 card-layout-title.

中的内容

我该怎么做（最好不要向每个级别添加和传递模板引用，因为每个级别都有 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 元素不再存在。因此，我建议解决此问题的方法是 "walk" 链中嵌套 ng-content 元素的顶级内容。 Plunker

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= 不会 select 不在顶层的元素。当你尝试向下投影它们时，无论你如何尝试，你都会用它们的包装标签来投影它们，所以目前 selecting 元素嵌套在标签中似乎是不可能的。您必须将其展平，即

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

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

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

ng-content transclude from parents scope when there are nested components

javascript

transclusion

angular