官方文档
核心指令ng-container,ng-template和ngTemplateOutlet一起使用,可以创建高度动态和可定制的组件。
ng-template 使用
- 配合*ngIf / else 使用:testing为false则引入模板ng-template内容
<div>
<span *ngIf="testing else loading">
已完成
</span>
</div>
<ng-template #loading>
<span>加载中。。。</span>
</ng-template>
- ng-template 模板上下文
- 同可见外部标签,可访问相同上下文环境(.ts文件属性)
- 定义ng-template自己的输入变量集
*ngTemplateOutlet = context: ctx -- ctx为传入模板的对象
<ng-container *ngTemplateOutlet="estimateTemplate;context:ctx"></ng-container>
let-后跟随的是一变量名(lessonsCounter),作用于模板内,变量值为传入对象内的某一属性(estimate)
<ng-template #estimateTemplate let-lessonsCounter="estimate">
<div> Approximately {{lessonsCounter.b}} lessons ...</div>
</ng-template>
ng-container功能
- 处理同一元素无法同时使用多个指令问题
Can't have multiple template bindings on one element. Use only one attribute prefixed with *Angular
<div *ngIf="loading" *ngFor="let item of list">{{item}}</div>
一般处理方法:多嵌套一层div,将两指令分开使用
<div *ngIf="loading">
<div *ngFor="let item of list">{{item}}</div>
</div>
通过ng-container处理:可以减少不必要的div嵌套
<ng-container *ngIf="loading">
<div *ngFor="let item of list">{{item}}</div>
</ng-container>
- 它可以提供一个占位符,用于动态地将模板注入页面
<ng-container *ngTemplateOutlet="loading"></ng-container>
<ng-template #loading>加载中</ng-template>
通过装饰器注入到组件
<ng-template #defaultTabButtons>
<div>This is A template</div>
</ng-template>
export class AppComponent implements OnInit {
@ViewChild('defaultTabButtons') private defaultTabButtonsTpl: TemplateRef<any>;
}
将模板注入子组件
在父组件中定义模板,并传入到子组件中
<ng-template #defaultTabButtons>
<div>This is A template</div>
</ng-template>
<app-tab-contain [headerTemplate]="defaultTabButtons"></app-tab-contain>
export class TabContain implement ngOnInit {
@Input('headerTemplate') headerTemplate: TemplateRef<any>;
}