使用ng-content进行组件内容投射
原文
https://www.jianshu.com/p/c0a39b1776c0
大纲
1、认识内容投射
2、一个简单组件
3、简单投射
4、针对性投射
5、ngProjectAs
6、代码资源
认识内容投射
在angular中,组件属于特殊的指令,它的特殊之处在于它有自己的模板(html)和样式(css)。因此使用组件可以使我们的代码具有强解耦、可复用、易扩展等特性。
一个简单组件
/*
demo.component.ts
*/
import { Component, OnInit } from ‘@angular/core‘;
@Component({
selector: 'demo-component',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
}
<!--
demo.component.html:
-->
<div class="demo">
<h2>
demo-component - 我是一个简单的组件
</h2>
</div>
/*
demo.component.scss:
*/
.demo {
padding: 10px;
border: 2px solid red; h2 {
margin: 0;
color: #262626;
}
}
<!--
此时我们引用该组件,就会呈现该组件解析之后的内容:
-->
<demo-component></demo-component>
需求
假设现在有这样的需求,这个组件能够接受外部投射进来的内容,也就是说组件最终呈现的内容不仅仅是本身定义的那些,那该怎么做呢?这时就要请出本文的主角 ng-content。
简单投射
<!--
demo.component.html:
-->
<div class="demo">
<h2>
demo-component - 可嵌入外部内容的组件
</h2>
<div class="content">
<ng-content></ng-content>
</div>
</div>
/*
demo.component.scss:
*/
.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;
}
}
<!--
为了效果展示特意将 所在的容器背景色定义为橙色。 这时我们在引用该组件时可以从外部投射内容,外部内容将在橙色区域显示:
-->
<demo-component>
我是外部嵌入的内容
</demo-component>
针对性投射
如果同时存在几个外部内容,那外部内容将如何进行投射呢?如果同时存在简单的外部内容,那么外部内容将投射在组件模板最后的那个ng-content中。
<!--
demo.component.html:
-->
<div class="demo">
<h2>
demo-component - 可嵌入外部内容的组件
</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=".demo2"></ng-content>
</div>
<div class="content green">
<ng-content select="[name=demo3]"></ng-content>
</div>
</div>
/*
demo.component.scss:
*/
.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;
}
}
}
<!--
从上面代码可以看到,蓝色区域将接收 标签 header 那部分内容,
红色区域将接收 class为"demo2"的div 的那部分内容,
绿色区域将接收 属性name为"demo3"的div 的那部分内容,
橙色区域将接收其余的外部内容(开始,我是外部嵌入的内容,结束)。 引用该组件:此时,我们将看到外部内容投射到了指定的 中。
--> <demo-component>
开始,我是外部嵌入的内容,
<header>
我是外部嵌入的内容,我在header中
</header>
<div class="demo2">
我是外部嵌入的内容,我所在div的class为"demo2"
</div>
<div name="demo3">
我是外部嵌入的内容demo,我所在div的属性name为"demo3"
</div>
结束
</demo-component>
ngProjectAs
现在我们知道通过 ng-content 的 select 属性可以指定外部内容投射到指定的元素中。
而要能正确的根据 select 属性投射内容,有个限制就是 - 不管是 标签 header、class为"demo2"的div还是 属性name为"demo3"的div,这几个标签都是作为 组件标签 的直接子节点。
通过设置 ngProjectAs 属性,让 标签header 所在的 div 指向了 select="header",此时 标签 header 那部分内容有投射到蓝色区域了。
<demo-component>
开始,我是外部嵌入的内容,
<div ngProjectAs="header">
<header>
我是外部嵌入的内容,我在header中
</header>
</div>
<div class="demo2">
我是外部嵌入的内容,我所在div的class为"demo2"
</div>
<div name="demo3">
我是外部嵌入的内容demo,我所在div的属性name为"demo3"
</div>
结束
</demo-component>
代码资源
angular实例代码中angular-ng-content中包含着使用ng-content进行组件内容投射,里面有本篇博客中所包含的所有实例,从一个简单组件到内容投射都含有,如果有兴趣的读者可以从git上下载下来尝试。
使用ng-content进行组件内容投射的更多相关文章
- Angular开发实践(八): 使用ng-content进行组件内容投射
在Angular中,组件属于特殊的指令,它的特殊之处在于它有自己的模板(html)和样式(css).因此使用组件可以使我们的代码具有强解耦.可复用.易扩展等特性.通常的组件定义如下: demo.com ...
- Angular:利用内容投射向组件输入ngForOf模板
现在,我们写一个组件puppiesListCmp,用于显示小狗狗的列表: //puppies-list.component.ts @Component({ selector: 'puppies-lis ...
- Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件
之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...
- 定时5秒之后驻留在元素ID为content元素的内容
如果我只能刷新一个特定的页面的一部分,这将是很大的,例如:仪表盘上的交通灯显示系统状态. 这是很容易通过使用jQuery JavaScript库,只刷新页面的一部分.一旦我们纳入我们的页面的jQuer ...
- Swing应用开发实战系列之四:组件内容实时刷新问题
窗口组件动态刷新问题,在dotnet中根本不算什么问题,用几句代码很轻松就能搞定,但是在Swing中,实现动态刷新组件内容却是一件颇为吃力的事情.譬如针对我们经常用到的刷新JLable.JTextFi ...
- Delphi TScrollBar 用于滚动窗口、组件内容
滚动条组件(TScrollBar)此组件是一个Windows滚动条,用于滚动窗口.组件内容.许多控制有滚动条属性,它们把滚动条作为自己的一部分,对于没有完整滚动条的控制,TScrollBar组件提供了 ...
- element table 组件内容换行方案
element table 组件内容换行方案 white-space的值: normal 默认.空白会被浏览器忽略.pre 空白会被浏览器保留.其行为方式类似 HTML 中的<pre> 标 ...
- Nginx content cache Nginx内容缓存
原文地址:http://nginx.com/resources/admin-guide/caching/ Nginx content cache Nginx内容缓存 This chapter desc ...
随机推荐
- 【Codeforces Round #456 (Div. 2) C】Perun, Ult!
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] set1 < pair < int,int > > set1;记录关键点->某个人怪物永远打不死了,第 ...
- badblocks 检查硬盘是否有坏道
硬盘是比較easy坏掉的设备,使用一段时间后可能会出现坏道等物理故障. 当硬盘出现坏道后,若不及时更换或者进行技术上的处理,磁盘的坏道就会越来越多,并会造成频繁死机和数据丢失. 最好的处理方法是更换新 ...
- 通过OpenSSL解析X509证书基本项
在之前的文章"通过OpenSSL解码X509证书文件"里.讲述了怎样使用OpenSSL将证书文件解码,得到证书上下文结构体X509的方法. 以下我们接着讲述怎样通过证书上下文结构体 ...
- emacs 为什么找不到运行程序?
我记得前段时间有个朋友问我为什么在emacs中打不开matlab程序?明明在terminal下是能打开的,却在emacs中不行. 今天自己最终遇到了相似的问题,我今天安装racket 6.0.安装好后 ...
- eclipse- MAT安装及使用
1.安装eclipse mat插件 1)查看当前eclipse版本 进入eclipse目录:右击eclipse图标,看到安装目录/home/zhangshuli/adt-bundle-linux-x8 ...
- 57.大数据线性处理csdn数据(fread,fwrite) 百万数据秒读数据
创建结构体存储csdn数据 struct csdn { ]; ]; ]; }; 对于分配的大小要先获取最大的长度,定义如下 //姓名最大长度 ; //密码最大长度 ; //邮件最大长度 ; //获取各 ...
- sql之group by的用法
1.概述 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组,所谓的分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理. 2.原始表 3.简 ...
- 请求不携带cookie问题
因为后端需要用到cookie做一些判断,所以在post请求前先写入了cookie.在页面未登录时,调接口能带上cookie,登录后的请求没有携带cookie,但是能看到cookie已经保存了. (ax ...
- android 4.4 添加物理按键
kernel下添加 Linux-3.4/drivers/input/keyboard/Makefile linux-3.4/drivers/input/keyboard/sw-keyboard.c s ...
- 15个常用的javaScript正则表达式--来自于javascript公众号
摘要 收集整理了15个常用的javaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IPv4地址. 十六进制颜色. 日期. ...