ng-template / ng-container / ngTemplateOutlet 使用

官方文档
核心指令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>;
}