ng-content的使用

一、ng-content
- 1.1基础组件及结构
- 1.2简单投射
- 1.3 针对性性投射
- 1.4ngProjectAs
二、ng-template
三、ng-container
四、区别
五、学习地址

一、ng-content

1.1基础组件及结构

app.component.ts
father-component.ts

import { Component, OnInit, ContentChild, TemplateRef } from '@angular/core';@Component({selector: 'app-father-component',templateUrl: './father-component.component.html',styleUrls: ['./father-component.component.css']
})
export class FatherComponentComponent implements OnInit {constructor() { }ngOnInit(): void {}}

father-component.html

 <div class="demo"><h2>一个简单的组件</h2></div>

father-component.css

.demo {padding: 10px;border: 2px solid red;
}
h2 {margin: 0;color: #262626;
}

此时我们引用该组件，就会呈现该组件解析之后的内容：

<app-father-component></app-father-component>

如果说这个组件能够接受外部投射进来的内容，也就是说组件最终呈现的内容不仅仅是本身定义的那些，那该怎么做呢？这时就要请出本文的主角 ng-content。

1.2简单投射

先修改father-component.html和father-component.css
father-component.html:

<div class="demo"><h2>一个简单的组件</h2><div class="content"><ng-content></ng-content></div>
</div>

father-component.css:

.demo {padding: 10px;border: 2px solid red;
}
h2 {margin: 0;color: #262626;
}
.content {padding: 10px;margin-top: 10px;line-height: 20px;color: #FFFFFF;background-color: #de7d28;
}

为了效果展示特意将所在的容器背景色定义为橙色。
这时我们在引用该组件时可以从外部投射内容，外部内容将在橙色区域显示：

<app-father-component>外部嵌入的内容
</app-father-component>

1.3 针对性性投射

如果同时存在几个，那外部内容将如何进行投射呢？
我们先看个示例，为了区别，我再新增一个蓝色区域的，修改后的father-component.html和 father-component.css 如下：

demo.component.html：

<div class="demo"><h2>一个简单的组件</h2><div class="content"><ng-content></ng-content></div><div class="content blue"><ng-content></ng-content></div>
</div>

father-component.css

.demo {padding: 10px;border: 2px solid red;
}
h2 {margin: 0;color: #262626;
}
.content {padding: 10px;margin-top: 10px;line-height: 20px;color: #FFFFFF;background-color: #de7d28;
}
.blue {background-color: blue;
}

引用组件

<app-father-component>外部嵌入的内容
</app-father-component>

此时，我们将看到外部内容投射到了蓝色区域：

当然，如果你将橙色区域代码放在蓝色区域代码的后面，那么外部内容就会投射到橙色区域：

<div class="demo"><h2>一个简单的组件</h2><div class="content blue"><ng-content ></ng-content></div><div class="content"><ng-content></ng-content></div>
</div>

所以从上面的示例我们可以看出，如果同时存在简单的，那么外部内容将投射在组件模板最后的那个中。

那么知道这个问题，我们可能会想，能不能将外部内容有针对性的投射相应的中呢？答案显然是可以的。

为了处理这个问题，支持一个 select 属性，可以让你在特定的地方投射具体的内容。该属性支持 CSS 选择器（标签选择器、类选择器、属性选择器、…）来匹配你想要的内容。如果 ng-content 上没有设置 select 属性，它将接收全部内容，或接收不匹配任何其他 ng-content 元素的内容。
修改后的father-component.html和 father-component.css 如下：

demo.component.html：

<div class="demo"><h2>一个简单的组件</h2><div class="content"><ng-content></ng-content></div><div class="content blue"><ng-content select="header"></ng-content></div><div class="content red"><ng-content select=".demo1"></ng-content></div><div class="content green"><ng-content select="[name=demo2]"></ng-content></div></div>

father-component.css ：

.demo {padding: 10px;border: 2px solid red;
}
h2 {margin: 0;color: #262626;
}
.content {padding: 10px;margin-top: 10px;line-height: 20px;color: #FFFFFF;background-color: #de7d28;
}
.blue {background-color: blue;
}
.red {background-color: red;
}
.green {background-color: green;
}

组件引用：

<app-father-component>开始， 外部嵌入的内容<header>header标签，外部嵌入的内容</header><div class="demo1">我是外部嵌入的内容，我所在div的class为"demo1"</div><div name="demo2">我是外部嵌入的内容demo，我所在div的属性name为"demo2"</div>结束
</app-father-component>

1.4ngProjectAs

现在我们知道通过 ng-content 的 select 属性可以指定外部内容投射到指定的中。

而要能正确的根据 select 属性投射内容，有个限制就是，只能直接子节点。
那如果不是作为直接子节点，会是什么情况呢？我们简单修改下引用 father-component 组件的代码，将标签header 放在一个div中，修改如下：
引用app-component.html:

<app-father-component>开始， 外部嵌入的内容<div><header>header标签，外部嵌入的内容</header></div><div class="demo1">我是外部嵌入的内容，我所在div的class为"demo1"</div><div name="demo2">我是外部嵌入的内容demo，我所在div的属性name为"demo2"</div>结束
</app-father-component>

此时，我们看到标签 header 那部分内容不再投射到蓝色区域中了，而是投射到橙色区域中了。原因就是无法匹配到之前的标签 header，故而将这部分内容投射到了橙色区域的中了。

为了解决这个问题，我们必须使用 ngProjectAs 属性，它可以应用于任何元素上。具体如下：

 <app-father-component>开始， 外部嵌入的内容<div ngProjectAs="header"><header>header标签，外部嵌入的内容</header></div><div ngProjectAs=".demo1"><div class="demo1">我是外部嵌入的内容，我所在div的class为"demo1"</div></div><div ngProjectAs="[name=demo2]"><div name="demo2">我是外部嵌入的内容demo，我所在div的属性name为"demo2"</div></div>结束</app-father-component>

二、ng-template

ng-template是Angular 结构型指令中的一种，用于定义模板渲染HTML(模板加载)。定义的模板不会直接显示出来，需要通过其他结构型指令（如 ng-if）或 template-ref 将模块内容渲染到页面中。

<!-- 通过ngIf结构型指令显示ng-template的内容 -->
<div class="lessons-list" *ngIf="condition else elseTemplate">判断条件为真
</div>
<ng-template #elseTemplate><div>判断条件为假</div>
</ng-template>

扩张：Angular中createEmbeddedView和createComponent之间的区别是什么
createEmbeddedView

三、ng-container

ng-container既不是一个Component，也不是一个Directive，只是单纯的一个特殊tag。ng-container可以直接包裹任何元素，包括文本，但本身不会生成元素标签，也不会影响页面样式和布局。包裹的内容，如果不通过其他指令控制，会直接渲染到页面中。

四、区别

ng-content: ng-content是内容映射指令(也叫内容嵌入)，相当于vue中的slot内容分发，内容映射指的是在组件中嵌入模板代码，方便定制可复用的组件，很好地扩充组件的功能，方便代码的复用.
ng-template ：使用 * 语法糖的结构指令，最终都会转换为或模板指令，模板内的内容如果不进行处理，是不会在页面中显示的。
ng-container：是一个逻辑容器，可用于对节点进行分组，但不作为 DOM 树中的节点，它将被渲染为 HTML中的 comment 元素，它可用于避免添加额外的元素来使用结构指令。

五、学习地址

ng-template、ng-content、ng-container
angular之ng-container 、ng-template、ng-content的使用
ng-container使用
g-template、ng-content、ng-container使用

ng-content、ng-template、ng-container使用及区别相关推荐

ng build --aot 与 ng build --prod
angluar的编译有以下几种方式: ng build 常规的压缩操作代码体积最大 ng build --aot angular预编译代码体积较小 ng build --pr ...
一些数据格式化-Eval( )和DataBinder.Eval(Container.DataItem, )的区别及用法
ASP.NET 2.0改善了模板中的数据绑定操作,把v1.x中的数据绑定语法DataBinder.Eval(Container.DataItem, fieldname)简化为Eval(fieldn ...
es中 content tier.和 hot tier有什么区别于联系
在Elasticsearch中,Content Tier和Hot Tier是存储和处理数据的不同层级,具有不同的特点和功能.它们之间的区别和联系如下: 区别: 数据类型:Content Tier主要用 ...
c#怎么读htm文件_c#怎么读写文件和获取文件的扩展名
P rotected void Write_Txt(stri ng FileName, stri ng Con te nt) { En codi ng code = En codi ng.GetE n ...
asp.net模板控件示例
asp.net模板控件示例原文:asp.net模板控件示例模板控件允许将控件数据与其表示形式相分离,模板化控件不提供用户界面. 编写它则是为了实现一个命名容器以及包含属性和方法可由宿主页访问的类, ...
NG Ng-content（内容映射）
ng-content ng-content是内容映射指令(也叫内容嵌入),内容映射指的是在组件中嵌入模板代码,方便定制可复用的组件,很好地扩充组件的功能,方便代码的复用. ng-content中的组件 ...
ng命令汇总：Angular CLI 使用教程指南参考
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装要安装Ang ...
Angular应用ng serve命令行的学习笔记
在Angular项目下执行命令行ng serve --open: The ng serve command builds the app, starts the development server, ...
ng build --prod --aot打包Angluar4项目报javaScript heap out of memory,内存溢出
这里 Allocation failed - JavaScript heap out of memory JavaScript堆内存不足,我们都知道 Node 是基于V8引擎,在一般的后端开发语言中, ...
NG Command（命令）
创建项目 ng new 项目名称创建带路由 ng new 项目名称 --routing 启动项目 ng serve -open 简写 ng serve -o 创建模块 ng g module Mod ...

ng-content、ng-template、ng-container使用及区别