zoukankan      html  css  js  c++  java
  • 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组件中的代码来使用多个嵌入内容,示例代码如下:

  • 相关阅读:
    vue+sass 下sass不能运行问题
    Servlet3.0的新特性
    Servlet监听器
    Servlet过滤器
    会话跟踪
    Servlet的应用
    Servlet概述
    《南怀瑾讲述99个人生道理》——刘清海编著
    Web应用程序简介
    JDBC学习总结(五)
  • 原文地址:https://www.cnblogs.com/1156063074hp/p/10996341.html
Copyright © 2011-2022 走看看