问题形容

我定义了一个可能容许消费者 Component 将其自定义内容通过 content projection 投射进来的 Component：

import {Component} from '@angular/core';

@Component({
  selector: 'app-zippy-basic',
  template: `
    Default:
    <ng-content></ng-content>

    Question:
    <ng-content select="[question]"></ng-content>
  `
})
export class ZippyBasicComponent {}

其中蕴含 default 和 question 两个区域。

对于 question 区域而言，只有在生产 Component 提供的内容，满足第 10 行指定的选择器时，该内容能力被投影到 app-zippy-basic 外部。

我的生产代码如下：

<app-zippy-basic>
    <p #question>
        带了问号的 p 节点
      </p>
      <p> 一般 p 节点 </p>
</app-zippy-basic>

我冀望的后果：

• 一般 p 节点，呈现在 default 区域；
• 带了问号的 p 节点，呈现在 question 区域。

理论测试后果：question 区域为空。

问题剖析

依据 Angular 官网的定义，select=”[question]” 的语法含意是，将生产 Component 中具备 question 的 attribute 的 dom 节点，投射到 app-zippy-basic 中。因而，第 23 行中的 # 应该去掉，这样能力产生一个具备 question 属性的 p 节点：

去掉之后，p 节点果然依照咱们冀望的那样，显示在 default 区域了：

咱们再来通过单步调试的形式，找到带有 question 属性的 p 节点是如何被抉择以及投射的。

Angular 框架外部保护了一个叫做 LView 即 Logic View 的数据结构，这是一个数组：

LView 的内容：

其中索引为 21 的数组元素，rawSlotValue，寄存的就是须要被投影到 question 区域，带有 question 属性的 p 节点。

总结

如果组件蕴含一个没有 select 属性的 ng-content 元素，则该实例会接管与任何其余 ng-content 元素都不匹配的所有投影组件。

逻辑视图 (LView) 示意模板 (TView) 的实例。咱们应用 逻辑 这个词来强调开发人员如何从逻辑角度对待应用程序。ParentComponent 蕴含一个 ChildComponent。从逻辑的角度来看，咱们认为 ParentComponent 蕴含 ChildComponent，因而称为 逻辑。逻辑一词与渲染树的最终概念造成比照。