浅谈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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
javascript:以前写的xmlhttp池,代码
May 18 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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
一个用php3编写的简单计数器
2006/10/09 PHP
PHP 批量删除 sql语句
2009/06/05 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
Js基础学习资料
2010/11/23 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
Vue实现简易购物车页面
2020/12/30 Vue.js
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
Djang中静态文件配置方法
2015/07/30 Python
python如何实现单链表的反转
2020/02/10 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
医院护士的求职信范文
2013/12/26 职场文书
新春文艺演出主持词
2014/03/27 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
机械操作工岗位职责
2014/08/08 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js