问题描述

我定义了一个能够允许消费者 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，因此称为逻辑。逻辑一词与渲染树的最终概念形成对比。

Angular 内容投影 content projection 关于选择器问题的单步调试相关推荐

Angular 内容投影 content projection 的一个问题的单步调试
问题描述我使用如下代码测试一个最简单的 Angular 内容投影场景: import { Component } from '@angular/core';@Component({selector: ...
Angular 内容投影 content projection 关于条件渲染问题的单步调试
问题描述本文涉及到的代码位置:https://github.com/wangzixi-diablo/ngDynamic ng-container 和 ngTemplateOutlet 的配合使用. ...
Angular 基于自定义指令的内容投影 content projection 问题的单步调试
问题描述本文涉及到的代码位置:https://github.com/wangzixi-diablo/ngDynamic 我有一个能接受内容投影的 Angular Component: 具体投影内容, ...
Angular 内容投影 II
内容投影是一种模式,你可以在其中插入或投影要在另一个组件中使用的内容. 简单来说,angular的内容投影就相当于vue的内容插槽slot.所有一下就能懂了. 1.单插槽内容投影单插槽内容投影是指创 ...
Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试
问题描述本文涉及到的代码位置:https://github.com/wangzixi-diablo/ngDynamic 我有一个能接受内容投影的 Angular Component: 使用如下代码消 ...
angular 内容投影
app HTML <div class="wrapper"><h2>我是父组件</h2><div>这个div定义在父组件中</ ...
关于 Angular view Query 的 id 选择器问题的单步调试
问题描述我有这样一个 Angular Component,模板文件如下: @Component({ selector: 'example-app', template: ` <pane id= ...
Angular依赖注入的一个例子和注入原理单步调试
定义一个抽象服务类: export abstract class GreetingService {abstract greet(name: string): string;} 定义一个具体类实现该抽 ...
Angular里interpolation text节点的创建逻辑，单步调试
通过一个例子来学习: 新建一个Component,只包含一个名为hero的属性,包含一个name字段,值为Jerry: export class AppComponent implements OnI ...

Angular 内容投影 content projection 关于选择器问题的单步调试

问题描述

问题分析

总结

Angular 内容投影 content projection 关于选择器问题的单步调试相关推荐

最新文章

热门文章