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

2021-01-11 15:09

浅谈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 

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