浅谈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篇:使用AngularJs打造一个简易权限系统的实现代码
本篇文章主要介绍了AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码,具有一定的参考价值,有兴趣的可以了解一下。2016-12-12基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
这篇文章主要给大家介绍基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动的实例代码,非常不错具有参考借鉴价值,感兴趣的朋友一起看看吧2016-05-05解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
这篇文章主要介绍了解决angular的post请求后SpringMVC后台接收不到参数值问题的方法,感兴趣的小伙伴们可以参考一下2015-12-12
最新评论