问题描述

我使用如下代码测试一个最简单的 Angular 内容投影场景：

import { Component } from '@angular/core';@Component({selector: 'app-zippy-basic',template: `<h2>Single-slot content projection</h2><ng-container></ng-container>`
})
export class ZippyBasicComponent {}

我期望 app-zippy-basic 的使用者，将传入的 content，投射到元素 ng-container 内部。

消费代码如下图所示：

<app-zippy-basic><p>Is content projection cool?</p><div>ok</div>
</app-zippy-basic>

然而运行时，我在渲染出的页面里，根本看不到 Is content projection cool? 的显示。

问题分析

打开 Chrome 开发者工具，发现 app-zippy-basic 内部只有一个 comment 节点：ng-container

我们在提供内容投影插槽的 Component 的 ng-container 之间随便键入一些字符串，例如 DIV:

渲染后发现，ng-container 没能按照我们期望的工作。

通过查阅 Angular 官网，发现这里把 ng-container 和 ng-content 弄混淆了。此处应该使用 ng-content.

解决方案

ng-content 之间不允许再插入其他元素。仅仅充当一个占位符的角色。

使用 ng-content 之后问题消失。这里我们可以通过单步调试的方式，搞清楚被投影的内容是如何插入到 ng-content 占位符里的。

选择 app-zippy-basic，给其设置一个 dom 断点，类型为 subtree modification：

首先执行 template 函数，将 Component 本身的 h2 元素，进行 HTML 源代码的渲染：

接下来是 Angular 处理整个内容投影逻辑的关键：

遇到 ng-content，则调用函数 ɵɵprojection：

转而调用 applyProjection：

parent node 即是指定义了 ng-content 的 Component 对应的 dom 元素：

rNode 即是被插入到 app-zippy-basic 中的节点，即 app-zippy-basic 的消费者。

消费语法：

<app-zippy-basic>
此处插入你想投影到 app-zippy-basic 内部的 HTML 源代码
</app-zippy-basic>

Angular 内容投影 content projection 的一个问题的单步调试相关推荐

Angular 内容投影 content projection 关于选择器问题的单步调试
问题描述我定义了一个能够允许消费者 Component 将其自定义内容通过 content projection 投射进来的 Component: import { Component } from ...
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里interpolation text节点的创建逻辑，单步调试
通过一个例子来学习: 新建一个Component,只包含一个名为hero的属性,包含一个name字段,值为Jerry: export class AppComponent implements OnI ...
通过单步调试的方式学习 Angular 中带有选择器的内容投影使用方式
问题描述我创建了一个 selector 为 app-content-section 的 Component,用于容纳内容投影(content projection): 这个 Component 的模 ...
使用Angular可重用Component思路实现一个自带图标(icon)的input控件
参考链接:Angular ng-content and Content Projection: A Complete Guide - How To Use ng-content To Improve ...

Angular 内容投影 content projection 的一个问题的单步调试

问题描述

问题分析

解决方案

Angular 内容投影 content projection 的一个问题的单步调试相关推荐

最新文章

热门文章