• angular2 组件内容嵌入(ng-content)


     一、简介

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

    二、用法

    如上,在模版中使用了<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组件中的代码来使用多个嵌入内容,示例代码如下:

  • 相关阅读:
    Java面向对象——属性赋值的过程
    Java面向对象——类的成员之三:构造器(构造方法)constructor
    课后作业—5
    缓冲类的使用示例
    缓冲技术
    流的基类
    流的分类
    什么是流?
    关于开发中异常处理的建议
    阅读笔记-3
  • 原文地址:https://www.cnblogs.com/1156063074hp/p/10996341.html
Copyright © 2020-2023  润新知