Angular模板中ng-template和ng-container指令的用法

这篇文章主要讲解了“Angular模板中ng-template和ng-container指令的用法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Angular模板中ng-template和ng-container指令的用法”吧！

我们提供的服务有：网站设计、成都网站制作、微信公众号开发、网站优化、网站认证、山南ssl等。为成百上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的山南网站制作公司

ng-template指令简介

ng-template是一个 Angular 结构型指令，用来渲染 HTML。它永远不会直接显示出来。事实上，在渲染视图之前，Angular 会把 ng-template 及其内容替换为一个注释。

如果没有使用结构型指令，而仅仅把一些别的元素包装进 ng-template 中，那些元素就是不可见的。

像*ngFor、 *ngIf这些指令Angular内部会把这些属性翻译成一个元素并用它来包裹宿主元素。

ng-container指令简介

为了避免创建额外的div，我们可以改用ng-container，它是一个分组元素，但它不会污染样式或元素布局，因为 Angular 压根不会把它放进 DOM 中。ng-container 是一个由 Angular 解析器负责识别处理的语法元素。它不是一个指令、组件、类或接口，更像是 JavaScript 中 if 块中的花括号。

ng-container用法

用法一（最基础的用法）

我们在一个列表循环里有写时候有一些判断要完成，我们知道angular的结构指令是不允许两个同时存在的，这个时候如果我们又不想增加多余的div就可以用ng-container


    
        {{item.context}}

用法二（结合ngSwitch一起使用）


    标题
    内容
    其他

当然ngSwitch也可以直接写在html标签上。

用法三（结合ng-template使用）

可以跟template配合使用，将重复的模块内容抽取出来，也可传参给要显示的模板。比如下面的这个例子，甲方有甲方姓名和介绍，乙方也同样有这些介绍，我们就可以把共同介绍整合出来。

乙方：

乙方姓名

export class AppComponent implements OnInit { // 引入模板 @ViewChild('content') contentTpl: TemplateRef; ngOnInit() { this.modalService.create({ nzTitle: '标题', nzContent: this.contentTpl }) } }

重庆分公司，新征程启航

Angular模板中ng-template和ng-container指令的用法

ng-template指令简介

ng-container指令简介

ng-container用法

ng-template用法

其他资讯