原文

  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. C# 读取指定文件夹中的全部文件,并按规则生成SQL语句!

    本实例的目的在于: 1 了解怎样遍历指定文件夹中的全部文件 2 控制台怎样输入和输出数据 代码: using System; using System.IO; namespace ToSql{ cla ...

  2. nginx学习十一 nginx启动流程

    今天用了一天的时间看nginx的启动流程,流程还是非常复杂.基本的函数调用有十几个之多.通过看源代码和上网查资料,弄懂了一些函数.有些函数还在学习中,有些函数还待日后学习,这里记录一下今天所学.加油! ...

  3. 20亿与20亿表关联优化方法(超级大表与超级大表join优化方法)

    记得5年前遇到一个SQL.就是一个简单的两表关联.SQL跑了几乎相同一天一夜,这两个表都非常巨大.每一个表都有几十个G.数据量每一个表有20多亿,表的字段也特别多. 相信大家也知道SQL慢在哪里了,单 ...

  4. 玩转Bash脚本:选择结构之case

    总第5篇 之前,我们谈到了if. 这次我们来谈还有一种选择结构--case. case与if if用于选择的条件,不是非常多的情况,假设选择的条件太多.一系列的if.elif,.也是醉了. 没错,ca ...

  5. 类似C语言格式化输出

    java se5引入的format方法可以用于PrintStream或PrintWriter对象,format方法模仿自C的printf(), 如果你比较怀旧的话,也可以用printf(). pack ...

  6. Linux系统捕获数据包流程

    Linux系统捕获数据包流程 为了提高数据包的捕获效率,瓶颈问题是一个需要非常关注的焦点.减少在捕获数据包过程中的瓶颈,就能够提高数据包捕获的整体性能.下面本文将以Linux操作系统为平台,分析捕获数 ...

  7. 最小二乘法,python3实现

    https://www.cnblogs.com/BlogOfMr-Leo/p/8627311.html                      [用的是库函数] https://blog.csdn. ...

  8. Java Web学习总结(15)——JSP指令

    一.JSP指令简介 JSP指令(directive)是为JSP引擎而设计的,它们并不直接产生任何可见输出,而只是告诉引擎如何处理JSP页面中的其余部分. 在JSP 2.0规范中共定义了三个指令: pa ...

  9. cocos2d-x 3.x游戏开发学习笔记(1)--mac下配置cocos2d-x 3.x开发环境

    打开用户文件夹下.bash_profile文件,配置环境 vim ~/.bash_profile //按键i,进行插入编辑(假设输错d进行删除一行) 环境配置过程例如以下: 1.首先配置下androi ...

  10. Dcloud开发webApp踩过的坑

    Dcloud开发webApp踩过的坑 一.总结 一句话总结:HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系 ...