概述
本篇文章带大家简单了解一下Angular模板的ng-template和ng-container指令，介绍一下ng-template和ng-container指令使用方法。
ng-template指令简介
ng-template是一个 Angular 结构型指令，用来渲染 HTML。 它永远不会直接显示出来。 事实上，在渲染视图之前，Angular 会把 ng-template 及其内容替换为一个注释。【相关教程推荐：《angular教程》】
如果没有使用结构型指令，而仅仅把一些别的元素包装进 ng-template 中，那些元素就是不可见的。
像*ngFor、 *ngIf这些指令Angular内部会把这些属性翻译成一个 元素 并用它来包裹宿主元素。
ng-container指令简介
为了避免创建额外的div，我们可以改用ng-container，它是一个分组元素，但它不会污染样式或元素布局，因为 Angular 压根不会把它放进 DOM 中。ng-container 是一个由 Angular 解析器负责识别处理的语法元素。 它不是一个指令、组件、类或接口，更像是 JavaScript 中 if 块中的花括号。
ng-container用法
用法一（最基础的用法）
我们在一个列表循环里有写时候有一些判断要完成，我们知道angular的结构指令是不允许两个同时存在的，这个时候如果我们又不想增加多余的div就可以用ng-container
<ul>
<ng-container *ngFor="let item of list">
<li *ngIf="item.context">{{item.context}}</li>
</ng-container>
</ul>登录后复制用法二（结合ngSwitch一起使用）
<ng-container [ngSwitch]="type">
<ng-container *ngSwitchCase="'title'">标题</ng-container>
<ng-container *ngSwitchCase="'text'">内容</ng-container>
<ng-container *ngSwitchDefault>其他</ng-container>
</ng-container>登录后复制当然ngSwitch也可以直接写在html标签上。
用法三（结合ng-template使用）
可以跟template配合使用，将重复的模块内容抽取出来，也可传参给要显示的模板。 比如下面的这个例子，甲方有甲方姓名和介绍，乙方也同样有这些介绍，我们就可以把共同介绍整合出来。
<div>
<!--甲方-->
<div>
<div class="left">甲方：</div>
<div class="right">
甲方姓名
<ng-container *ngTemplateOutlet="introduce; context: {data: data.partyA}"></ng-container>
<!--也可以写成这种方式-->
<!--
<ng-container [ngTemplateOutlet]="introduce"
[ngTemplateOutletContext]="{data: data.partyA}">
</ng-container>
[ngTemplateOutlet]也可用在ng-template上
-->
</div>
</div>
<!--乙方-->
<div>
<div class="left">乙方：</div>
<div class="right">
乙方姓名
<ng-container *ngTemplateOutlet="introduce; context: {data: data.partyB}"></ng-container>
</div>
</div>
<!--let-data="data"就是上面传进来的值-->
<ng-template #introduce let-data="data">
<p>合同介绍......</p>
</ng-template>
</div>登录后复制ngTemplateOutlet是定义模板引用和模板的上下文(即ng-template)对象的字符串，这样如果有多个模板引用可以用这种方式 ngTemplateOutletContext是附加到的上下文(即ng-template)对象EmbeddedViewRef。这应该是一个对象，该对象的键可用于本地模板let 声明的绑定。$implicit在上下文(即ng-template)对象中使用键会将其值设置为默认值。 ngTemplateOutlet也可用于外部传进来的模板
child.component.html
<ng-template [ngTemplateOutlet]="tplRef" [ngTemplateOutletContext]="{data: data}"></ng-template>登录后复制child.component.ts
@Input() tplRef: TemplateRef<any>
登录后复制ng-template用法
用法一
结合*ngIf使用，这样可以不用加两次不同判断条件，可以在html里直接使用if else语句
<div *ngIf="text; else noData">{{text}}</div>
<ng-template #noData>
<div class="gary">暂无数据</div>
</ng-template>登录后复制用法二
页面里使用antd的modalService创建对话框时，可以模板写在html里面，通过引用加载过来放到modal的nzContent里（说的有点乱了，看代码吧）
<ng-tempalte #content>xxxxxxx</ng-template>
登录后复制export class AppComponent implements OnInit {
// 引入模板
@ViewChild('content') contentTpl: TemplateRef<any>;
ngOnInit() {
this.modalService.create({
nzTitle: '标题',
nzContent: this.contentTpl
})
}
}登录后复制用法三
以模板的形式，作为一个输入变量传给组件，这样我们就可以在用这个组件时写成自己想要的内容 比如我们写个共用的暂无数据的组件，一般只用传text文字就可以有些特殊的时候我们可能需要一些新增按钮。
empty.component.html
<div>
<img src=""/>
<div>
<ng-container [ngSwitch]="true">
<ng-container *ngSwitchCase="isTemplate(text)"
[ngTemplateOutlet]="text"
></ng-container>
</ng-container>
{{text || ''}}
</div>
</div>登录后复制empty.component.ts
export class EmptyComponent {
@Input() text: TemplateRef<any>
isTemplate(text: any) {
return text instanceof TemplateRef;
}
}登录后复制总结，都是一些最基础的用法，现在所了解的就这些用法，如果有知道更多的欢迎大家补充。
最后
以上就是喜悦歌曲为你收集整理的浅谈Angular模板指令：ng-template和ng-container的用法的全部内容，希望文章能够帮你解决浅谈Angular模板指令：ng-template和ng-container的用法所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复