原文

  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进行组件内容投射的更多相关文章

  1. Angular开发实践(八): 使用ng-content进行组件内容投射

    在Angular中,组件属于特殊的指令,它的特殊之处在于它有自己的模板(html)和样式(css).因此使用组件可以使我们的代码具有强解耦.可复用.易扩展等特性.通常的组件定义如下: demo.com ...

  2. Angular:利用内容投射向组件输入ngForOf模板

    现在,我们写一个组件puppiesListCmp,用于显示小狗狗的列表: //puppies-list.component.ts @Component({ selector: 'puppies-lis ...

  3. Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件

    之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...

  4. 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件

    写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...

  5. 定时5秒之后驻留在元素ID为content元素的内容

    如果我只能刷新一个特定的页面的一部分,这将是很大的,例如:仪表盘上的交通灯显示系统状态. 这是很容易通过使用jQuery JavaScript库,只刷新页面的一部分.一旦我们纳入我们的页面的jQuer ...

  6. Swing应用开发实战系列之四:组件内容实时刷新问题

    窗口组件动态刷新问题,在dotnet中根本不算什么问题,用几句代码很轻松就能搞定,但是在Swing中,实现动态刷新组件内容却是一件颇为吃力的事情.譬如针对我们经常用到的刷新JLable.JTextFi ...

  7. Delphi TScrollBar 用于滚动窗口、组件内容

    滚动条组件(TScrollBar)此组件是一个Windows滚动条,用于滚动窗口.组件内容.许多控制有滚动条属性,它们把滚动条作为自己的一部分,对于没有完整滚动条的控制,TScrollBar组件提供了 ...

  8. element table 组件内容换行方案

    element table 组件内容换行方案 white-space的值: normal 默认.空白会被浏览器忽略.pre 空白会被浏览器保留.其行为方式类似 HTML 中的<pre> 标 ...

  9. Nginx content cache Nginx内容缓存

    原文地址:http://nginx.com/resources/admin-guide/caching/ Nginx content cache Nginx内容缓存 This chapter desc ...

随机推荐

  1. 【Codeforces Round #456 (Div. 2) C】Perun, Ult!

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] set1 < pair < int,int > > set1;记录关键点->某个人怪物永远打不死了,第 ...

  2. badblocks 检查硬盘是否有坏道

    硬盘是比較easy坏掉的设备,使用一段时间后可能会出现坏道等物理故障. 当硬盘出现坏道后,若不及时更换或者进行技术上的处理,磁盘的坏道就会越来越多,并会造成频繁死机和数据丢失. 最好的处理方法是更换新 ...

  3. 通过OpenSSL解析X509证书基本项

    在之前的文章"通过OpenSSL解码X509证书文件"里.讲述了怎样使用OpenSSL将证书文件解码,得到证书上下文结构体X509的方法. 以下我们接着讲述怎样通过证书上下文结构体 ...

  4. emacs 为什么找不到运行程序?

    我记得前段时间有个朋友问我为什么在emacs中打不开matlab程序?明明在terminal下是能打开的,却在emacs中不行. 今天自己最终遇到了相似的问题,我今天安装racket 6.0.安装好后 ...

  5. eclipse- MAT安装及使用

    1.安装eclipse mat插件 1)查看当前eclipse版本 进入eclipse目录:右击eclipse图标,看到安装目录/home/zhangshuli/adt-bundle-linux-x8 ...

  6. 57.大数据线性处理csdn数据(fread,fwrite) 百万数据秒读数据

    创建结构体存储csdn数据 struct csdn { ]; ]; ]; }; 对于分配的大小要先获取最大的长度,定义如下 //姓名最大长度 ; //密码最大长度 ; //邮件最大长度 ; //获取各 ...

  7. sql之group by的用法

    1.概述 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组,所谓的分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理. 2.原始表 3.简 ...

  8. 请求不携带cookie问题

    因为后端需要用到cookie做一些判断,所以在post请求前先写入了cookie.在页面未登录时,调接口能带上cookie,登录后的请求没有携带cookie,但是能看到cookie已经保存了. (ax ...

  9. android 4.4 添加物理按键

    kernel下添加 Linux-3.4/drivers/input/keyboard/Makefile linux-3.4/drivers/input/keyboard/sw-keyboard.c s ...

  10. 15个常用的javaScript正则表达式--来自于javascript公众号

    摘要 收集整理了15个常用的javaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IPv4地址. 十六进制颜色. 日期. ...