问题形容
我定义了一个可能容许消费者 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,因而称为 逻辑
。逻辑一词与渲染树的最终概念造成比照。