Angular|Angular 内容投影 content projection 关于选择器问题的单步调试
问题描述
我定义了一个能够允许消费者 Component 将其自定义内容通过 content projection
投射进来的 Component:
import { Component } from '@angular/core';
@Component({
selector: 'app-zippy-basic',
template: `
Default:
Question:
`
})
export class ZippyBasicComponent {}
其中包含
default
和 question
两个区域。对于 question 区域而言,只有在消费 Component 提供的内容,满足第 10 行指定的选择器时,该内容才能被投影到
app-zippy-basic
内部。![Angular|Angular 内容投影 content projection 关于选择器问题的单步调试](https://img.it610.com/image/info9/3e2990e7d6034ef58ac434d23776a1ba.jpg)
文章图片
我的消费代码如下:
【Angular|Angular 内容投影 content projection 关于选择器问题的单步调试】带了问号的 p 节点
普通 p 节点
我期望的结果:
- 普通 p 节点,出现在 default 区域;
- 带了问号的 p 节点,出现在 question 区域。
![Angular|Angular 内容投影 content projection 关于选择器问题的单步调试](https://img.it610.com/image/info9/11e8b121367f44bda6867e025ac1257d.jpg)
文章图片
问题分析 根据 Angular 官网的定义,select="[question]" 的语法含义是,将消费 Component 中具有
question
的 attribute
的 dom 节点,投射到 app-zippy-basic
中。因此,第 23 行中的 #
应该去掉,这样才能产生一个具有 question
属性的 p 节点:![Angular|Angular 内容投影 content projection 关于选择器问题的单步调试](https://img.it610.com/image/info9/37c2d9df474d4ad6b7d578affaeb9a38.jpg)
文章图片
去掉之后,p 节点果然按照我们期望的那样,显示在
default
区域了:![Angular|Angular 内容投影 content projection 关于选择器问题的单步调试](https://img.it610.com/image/info9/7cdd87e4666f4a86ad32a5ac9110e74d.jpg)
文章图片
我们再来通过单步调试的方式,找到带有
question
属性的 p 节点是如何被选择以及投射的。![Angular|Angular 内容投影 content projection 关于选择器问题的单步调试](https://img.it610.com/image/info9/ab8f51107ec84b1dbac8f569afd126f7.jpg)
文章图片
Angular 框架内部维护了一个叫做
LView
即 Logic View
的数据结构,这是一个数组:![Angular|Angular 内容投影 content projection 关于选择器问题的单步调试](https://img.it610.com/image/info9/d44b0524a2f044e69fde0b5c922e5028.jpg)
文章图片
LView
的内容:![Angular|Angular 内容投影 content projection 关于选择器问题的单步调试](https://img.it610.com/image/info9/be163cfb689f4b39927ccb1f0529a6fc.jpg)
文章图片
其中索引为 21 的数组元素,
rawSlotValue
,存放的就是需要被投影到 question 区域,带有 question 属性的 p 节点。![Angular|Angular 内容投影 content projection 关于选择器问题的单步调试](https://img.it610.com/image/info9/33bdef116c694df99a53b91a1dd0eee3.jpg)
文章图片
总结 如果组件包含一个没有 select 属性的
ng-content
元素,则该实例会接收与任何其他 ng-content
元素都不匹配的所有投影组件。逻辑视图 (LView) 表示模板 (TView) 的实例。 我们使用
逻辑
这个词来强调开发人员如何从逻辑角度看待应用程序。 ParentComponent 包含一个 ChildComponent。 从逻辑的角度来看,我们认为 ParentComponent 包含 ChildComponent,因此称为逻辑
。 逻辑一词与渲染树的最终概念形成对比。推荐阅读
- Angular|Angular 基于自定义指令的内容投影 content projection 问题的单步调试
- 安全|安全防护基本知识
- [gRPC|[gRPC via C#] gRPC本质的探究与实践
- Python数据可视化|python 数据可视化01
- 设计模式~代理模式
- 前端架构三大巨头之一|前端架构三大巨头之一 Angular | 深度讲解
- 关于Angular引入swiper后autoplay失效的解决办法
- 企业内部线上培训系统源码
- 内向性格的力量
- Typescript 一些令人又爱又恨的内容 — Type Guard、Narrowing