使用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 ...
随机推荐
- C# 读取指定文件夹中的全部文件,并按规则生成SQL语句!
本实例的目的在于: 1 了解怎样遍历指定文件夹中的全部文件 2 控制台怎样输入和输出数据 代码: using System; using System.IO; namespace ToSql{ cla ...
- nginx学习十一 nginx启动流程
今天用了一天的时间看nginx的启动流程,流程还是非常复杂.基本的函数调用有十几个之多.通过看源代码和上网查资料,弄懂了一些函数.有些函数还在学习中,有些函数还待日后学习,这里记录一下今天所学.加油! ...
- 20亿与20亿表关联优化方法(超级大表与超级大表join优化方法)
记得5年前遇到一个SQL.就是一个简单的两表关联.SQL跑了几乎相同一天一夜,这两个表都非常巨大.每一个表都有几十个G.数据量每一个表有20多亿,表的字段也特别多. 相信大家也知道SQL慢在哪里了,单 ...
- 玩转Bash脚本:选择结构之case
总第5篇 之前,我们谈到了if. 这次我们来谈还有一种选择结构--case. case与if if用于选择的条件,不是非常多的情况,假设选择的条件太多.一系列的if.elif,.也是醉了. 没错,ca ...
- 类似C语言格式化输出
java se5引入的format方法可以用于PrintStream或PrintWriter对象,format方法模仿自C的printf(), 如果你比较怀旧的话,也可以用printf(). pack ...
- Linux系统捕获数据包流程
Linux系统捕获数据包流程 为了提高数据包的捕获效率,瓶颈问题是一个需要非常关注的焦点.减少在捕获数据包过程中的瓶颈,就能够提高数据包捕获的整体性能.下面本文将以Linux操作系统为平台,分析捕获数 ...
- 最小二乘法,python3实现
https://www.cnblogs.com/BlogOfMr-Leo/p/8627311.html [用的是库函数] https://blog.csdn. ...
- Java Web学习总结(15)——JSP指令
一.JSP指令简介 JSP指令(directive)是为JSP引擎而设计的,它们并不直接产生任何可见输出,而只是告诉引擎如何处理JSP页面中的其余部分. 在JSP 2.0规范中共定义了三个指令: pa ...
- cocos2d-x 3.x游戏开发学习笔记(1)--mac下配置cocos2d-x 3.x开发环境
打开用户文件夹下.bash_profile文件,配置环境 vim ~/.bash_profile //按键i,进行插入编辑(假设输错d进行删除一行) 环境配置过程例如以下: 1.首先配置下androi ...
- Dcloud开发webApp踩过的坑
Dcloud开发webApp踩过的坑 一.总结 一句话总结:HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系 ...