微信小程序游戏制作_浅谈Angular2 ng

摘要: 探讨Angular2 ng-content 命令在部件中置入內容 例如:网页页面的header是个通用性部件,导航栏莱单款式早已设置好,只需在header标识里加上莱单內容。用ng-content标识,将父部件模版...

浅谈Angular2 ng-content 指令在组件中嵌入内容       本篇文章主要介绍了浅谈Angular2 ng-content 指令在组件中嵌入内容,具有一定的参考价值,有兴趣的可以了解一下

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

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

header组件的模板:

 {{title}}
 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 
 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 

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




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:电商网站