ng2中的ng-content用法

用途:1.ng-content用于在组件中嵌入内容

   2.ng-content可以在组件中嵌入模板代码,方便定制可复用的组件

select属性支持css选择器,如"#id",".class",["name"="value"]等

eg:父组件html内容为:

<app-ngcontent>
    <div class="left">123456</div>
    <div class="right">654321</div>
</app-ngcontent>

<--注:这里的app-ngcontent为可复用的组件模板的选择器-->

可复用的组件模板为:

<div style="font-size:20px;">
    <ng-content select=".left"></ng-content>
</div>
<div style="color:red;">
    <ng-content select=".right"></ng-content>
</div>

那么页面上就会显示:

时间: 2024-11-01 13:57:23

ng2中的ng-content用法的相关文章

STL中的Vector相关用法

STL中的Vector相关用法 标准库vector类型使用需要的头文件:#include <vector>. vector 是一个类模板,不是一种数据类型,vector<int>是一种数据类型. Vector的存储空间是连续的,list不是连续存储的. 1. 定义和初始化 vector< typeName > v1; //默认v1为空,故下面的赋值是错误的v1[0]=5;//v2是v1的一个副本,若v1.size()>v2.size()则赋值后v2.size()被

1:CSS中一些@规则的用法小结 2: @media用法详解

第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule是一个声明,为CSS提供执行或怎么表现的指令.每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做什么.这是一个通用的语法,尽管每个at-rule有其它语法变体.常规规则 常规规则遵循下面的语法: 复制代码 代码如下: @[KEYWORD] (RULE); @charset

HTML中META标签一些用法

你的个人网站做得再精彩,在如此庞大的网络空间,被人发现实属不易.那么如何推广个人网站,人们一般会这样做: ● 在搜索引擎中登录自己的个人网站 ● 在知名网站加入你个人网站的链接 ● 在论坛中发帖子宣传你的个人网站 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性! META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以

解析PHP中ob_start()函数的用法

解析PHP中ob_start()函数的用法 本篇文章是对PHP中ob_start()函数的用法进行了详细的分析介绍,需要的朋友参考下 ob_start()函数用于打开缓冲区,比如header()函数之前如果就有输出,包括回车/空格/换行/都会有"Header had all ready send by"的错误,这时可以先用ob_start()打开缓冲区PHP代码的数据块和echo()输出都会进入缓冲区而不会立刻输出.当然打开缓冲区的作用很 多,只要发挥你的想象.可以总结以下四点: 1.

(转)解析PHP中ob_start()函数的用法

本篇文章是对PHP中ob_start()函数的用法进行了详细的分析介绍,需要的朋友参考下 ob_start()函数用于打开缓冲区,比如header()函数之前如果就有输出,包括回车/空格/换行/都会有"Header had all ready send by"的错误,这时可以先用ob_start()打开缓冲区PHP代码的数据块和echo()输出都会进入缓冲区而不会立刻输出.当然打开缓冲区的作用很多,只要发挥你的想象.可以总结以下四点: 1.用于header()之前ob_start();

Activity中ConfigChanges属性的用法

Activity中ConfigChanges属性的用法 - 综合讨论 - Android开发论坛 - 安卓开发论坛 - Android开发 - 安卓论坛 - 移动互联网门户 - Powered by Discuz! 通过设置这个属性可以使Activity捕捉设备状态变化,以下是可以被识别的内容:?? CONFIG_FONT_SCALE CONFIG_MCC CONFIG_MNC CONFIG_LOCALE CONFIG_TOUCHSCREEN CONFIG_KEYBOARD CONFIG_NAV

React中Props 和 State用法

React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法,上层组件就可以通过下层组件的props属性进行传递,因此props是组件对外的接口.组件除了使用上层组件传递的数据外,自身也可能需要维护管理数据,这就是组件对内的接口state.根据对外接口props 和对内接口state,组件计算出对应界面的UI=>UI = C

好程序员web前端分享html中meta标签及用法详解

好程序员web前端分享html中meta标签及用法详解,这篇文章给大家介绍了html中meta标签及用法详解,感兴趣的朋友一起看看,Html中meta标签一.meta标签 含义 <meta> 元素 可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. <meta> 标签位于文档的头部,不包含任何内容. <meta> 标签的属性定义了与文档相关联的名称/值对.二.meta 中常用属性 charset? (字符集) 说明:规

IOS中NSString的常见用法

iOS NSString的常用用法 //1.创建常量字符串. NSString *astring = @"This is a String!"; //2.创建空字符串,给予赋值. NSString *astring = [[NSString alloc] init]; astring = @"This is a String!"; //3.在以上方法中,提升速度:initWithString方法 NSString *astring = [[NSString allo

MongoDB官方C#驱动中查询条件Query用法

http://www.cnblogs.com/viprx/archive/2012/09/06/2673693.html MongoDB条件查询的基本语法. Query.All("name", "a", "b");//通过多个元素来匹配数组  Query.And(Query.EQ("name", "a"), Query.EQ("title", "t"));//同时满足