一、简介

内容嵌入是组件的一个高级功能特性,使用组件的内容嵌入特性能很好地扩充组件的功能,方便代码的复用。

二、用法

如上,在模版中使用了<ng-content>标签,这个标签就是用来渲染组件嵌入内容的。在<ng-content>中有个select="header",用于匹配内容,并填充到ng-content中。

下面是一个简单的根组件来使用它:

最后组件的DOM树会被Angular渲染成:

注意到在<example-content>标签之间的内容,也就是<header>Header content</header>,被填充到ng-content,而NgContentExampleComponent组件模版中的其他元素没有受到影响。那么嵌入的内容是如何匹配显示的呢?上文提及到了select="header",select属性是一个选择器,与CSS选择器作用是类似的,它表示匹配<example-content>标签之间的第一个header标签,并将其填充到相应的ng-content中。
另外,还可以同时使用多个嵌入内容。下面修改NgContentExampleComponent组件的代码,通过标签选择器、类选择器、属性选择器来指定多个ng-content,示例代码如下:

然后修改NgContentAppComponent组件中的代码来使用多个嵌入内容,示例代码如下:

angular2 组件内容嵌入(ng-content)的更多相关文章

  1. 3.认识Angular2组件之1

    简述:组件(component)是构成Angular应用的基础和核心.可以这样说,组件用来包装特定的功能,应用程序的有序运行依赖于组件之间的协同工作. 1. 组件化标准:W3C为了统一组件化的标准方式 ...

  2. Fis3的前端工程化之路[三大特性篇之内容嵌入]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

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

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

  4. 使用ng-content进行组件内容投射

    原文 https://www.jianshu.com/p/c0a39b1776c0 大纲 1.认识内容投射 2.一个简单组件 3.简单投射 4.针对性投射 5.ngProjectAs 6.代码资源 认 ...

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

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

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

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

  7. Angular2 组件生命周期

    1. 说明 Angular每个组件都存在一个生命周期,从创建,变更到销毁.Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力. 2. 接口 按照生命周期 ...

  8. Angular2 组件

    1. 组件说明 Angular2 组件是构成Angular2应用程序的核心部分,Angualr2应用程序本质上来说就是一个组件树,Angular2组件一般由模块,注解,元数据以及组件类组成,实现组件类 ...

  9. 内容生成器:content、计数器、多列

    一,内容生成器:content 补充before和after伪类选择器: 1):将内容添加到某个选择器定义的单个或者多个元素的每一个实例之前或者之后 2)与before选择器配合使用(同理大家想下会不 ...

随机推荐

  1. Spring对junit的整合

    Spring对junit的整合 package cn.mepu.service; import cn.mepu.config.SpringConfiguration; import cn.mepu.d ...

  2. 框架集 frameset

    框架集和内联框架的作用类似,都用于在一个页面中引入其他的外部的页面 框架集可以同时引入多个页面,而内联框架引入一个, 在h5标准中,推荐使用框架集,而不使用内联框架 使用 frameset 来创建一个 ...

  3. session复制

    环境描述:(三台服务器 系统:7.6)192.168.200.111 nginx192.168.200.112 tomcat192.168.200.113 tomcat环境配置:192.168.200 ...

  4. 关于vsphere exsi安装时遇到的问题

    我在虚拟机上安装vsphere 6.0的时候,在安装的过程中报错,出现了如下的内容. Error loading /tools.t00 Compressed MD5: Decompressed MD5 ...

  5. CyberArk

    CyberArk PIM 套件由5个部分组成: · CyberArk EPV (Enterprise Password Vault)– 企业密码保险库 基于CyberArk 专利的Vault技术,为企 ...

  6. nodejs 模板引擎ejs的简单使用(3)

    1.ejs <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  7. Redis Desktop Manager可视化工具连接不上redis

    1.在centos中启动redis之后,redis进程也是可查的,但是一连接可视化工具就报错: can't connect to redis-server 2.原因分析: ①首先redis是肯定已经开 ...

  8. look at me

    I would bet my life, like I bet my heart我以生命与真心担保That you were the one, baby你就是我的命中注定I've never been ...

  9. Python 爬取赶集网租房信息

    代码已久,有可能需要调整 #coding:utf-8 from bs4 import BeautifulSoup #有这个bs4不用正则也可以定位要爬取的内容了 from urlparse impor ...

  10. [学习笔记] $Maximum$ $Minimum$ $identity$

    \(Maximum\) \(Minimum\) \(identity\)学习笔记 比较好玩的一个科技.具体来说就是\(max(a,b)=a+b-min(a,b)\),这个式子是比较显然的,但是这个可以 ...