浅谈Angular2 ng-content 指令在组件中嵌入内容


Posted in Javascript onAugust 18, 2017

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

比如:页面的header是个通用组件,导航菜单样式已经设定好,只需在header标签内加上菜单内容。

用ng-content标签,将父组件模板中包含的menu标签内容加到指定位置。select属性支持css选择器,如:"#id",".class","[name=value]"等

header组件的模板:

<p>
 {{title}}
</p>
<p><input type="checkbox" name="cb" [(ngModel)]="isChecked" (click)="toggle()" />Checkbox <br /></p>
<ng-content select="menu"></ng-content>

父组件使用方法:

<app-header #header [title]="title" name="{{name}}" (checkEmitter)="onCheckedChange($event)" >
 <menu>
  <ul>
   <li>aa</li>
   <li>bb</li>
   <li>cc</li>
  </ul>
 </menu>
</app-header>
<app-header #header2 [title]="title2" name="{{name}}" (checkEmitter)="onCheckedChange($event)" ></app-header>
<button (click)="header.toggle()">通过本地变量调用子组件方法</button>
<button (click)="headerToggle()">通过ViewChild调用子组件方法</button>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
js实现图片轮换效果代码
Apr 16 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
js实现文字截断功能
Sep 14 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
ES6函数和数组用法实例分析
May 23 Javascript
Vue中引入样式文件的方法
Aug 18 #Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 #jQuery
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 #Javascript
select自定义小三角样式代码(实用总结)
Aug 18 #Javascript
js使用highlight.js高亮你的代码
Aug 18 #Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 #Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 #Javascript
You might like
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
jQuery实现本地存储
2020/12/22 jQuery
Python 连连看连接算法
2008/11/22 Python
Python3基础之list列表实例解析
2014/08/13 Python
python自然语言编码转换模块codecs介绍
2015/04/08 Python
python中requests和https使用简单示例
2018/01/18 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
毕业生自我鉴定
2013/12/04 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
社区活动策划方案
2014/08/21 职场文书
迎新生标语大全
2014/10/06 职场文书
2014年车间工作总结
2014/11/21 职场文书
校本培训个人总结
2015/02/28 职场文书
环卫工作个人总结
2015/03/04 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技