content 指令在组件中嵌入内容

ng-content指令可以在组件中嵌入模板代码,方便定制可复用的组件。

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

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

header组件的模板:

<p> {{title}} </p> <p><input type="checkbox" [(ngModel)]="isChecked" (click)="toggle()" />Checkbox <br /></p> <ng-content select="menu"></ng-content>

父组件使用方法:

<app-header #header [title]="title" (checkEmitter)="onCheckedChange($event)" > <menu> <ul> <li>aa</li> <li>bb</li> <li>cc</li> </ul> </menu> </app-header> <app-header #header2 [title]="title2" (checkEmitter)="onCheckedChange($event)" ></app-header> <button (click)="header.toggle()">通过本地变量调用子组件方法</button> <button (click)="headerToggle()">通过ViewChild调用子组件方法</button>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wydzwp.html