富贵资源网 Design By www.hznty.com
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...