浅谈Angular2 ng-content 指令在组件中嵌入内容
更新时间：2017年08月18日 14:30:06 作者：坐在那边看天空
本篇文章主要介绍了浅谈Angular2 ng-content 指令在组件中嵌入内容，具有一定的参考价值，有兴趣的可以了解一下
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解angularJs中自定义directive的数据交互，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
这篇文章主要给大家介绍了关于Angular8路由守卫原理和使用方法的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Angular8具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
这篇文章主要介绍了详解Angular6学习笔记之主从组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
本篇文章主要介绍了angular 中的自定义指令之详解API，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了Angular2 父子组件数据通信实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
今天小编就为大家分享一篇angularJs中json数据转换与本地存储的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
本篇文章主要介绍了Angular 2的管道Pipe的使用方法，详细的介绍了管道的定义和使用方法，具有一定的参考价值，有兴趣的可以了解一下2017-11-11
详解基于Bootstrap+angular的一个豆瓣电影app
本篇文章主要介绍了基于Bootstrap+angular的一个豆瓣电影app ，非常具有实用价值，需要的朋友可以参考下2017-06-06
ionic3+Angular4实现接口请求及本地json文件读取示例
本篇文章主要介绍了ionic3+Angular4实现接口请求及本地json文件读取示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
最近这两天公司正在做一个PDF协议下载的功能，目前的解决方案可以分为完全前端生成和后端生成两种方式。前端生成PDF有jsPDF 和pdfmake 两种方式，下面这篇文章就给大家分享下如何在Angular.JS中接收并下载PDF的方法，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-11-11
最新评论