angular ng-template,ng template
在本文中，我们将简要了解Angular template的ng-template和ng-container指令，并介绍ng-template和ng-container指令的用法。
ng-template指令简介
ng-template是一个有角度的结构化指令，用于呈现HTML。永远不会直接表现出来。事实上，在呈现视图之前，Angular会用一个注释替换ng模板及其内容。【相关教程推荐：《angular教程》】
如果不使用结构化指令，而只是在ng-template中包装一些其他元素，这些元素是不可见的。
像*ngFor和*ngIf这样的指令会把这些属性翻译成Angular内部的一个元素，并用它包装宿主元素。
ng-container指令简介
为了避免创建额外的div，我们可以使用ng-container来代替。它是一个分组元素，但是不会污染样式或者元素布局，因为Angular根本不会把它放到DOM里。Ng-container是一个语法元素，由Angular解析器识别和处理。它不是指令、组件、类或接口，而更像JavaScript中if块中的花括号。
ng-container用法
用法一（最基础的用法）
在链表循环中，我们需要完成一些判断。我们知道angular的结构指令不允许两个同时存在。这时，如果我们不想添加额外的div，可以使用ng-container。
保险商实验所
ng-container *ngFor=列表中的字母项
Li * ngIf= item . context { item . context } }/Li
/ng-容器
/ul用法二（结合ngSwitch一起使用）
ng-container [ngSwitch]=type
ng-container * ngswitchcase= title title/ng-container
ng-container * ngswitchcase= text 内容/ng-container
Ng-container *ngSwitchDefault其他/ng-container
/ng-container当然，ngSwitch也可以直接写在html标签上。
用法三（结合ng-template使用）
它可以与模板结合使用来提取重复的模块内容，也可以传递给模板来显示。
比如下面这个例子，甲方有甲方的名字和介绍，乙方也有这些介绍，我们就可以把常见的介绍整合起来。
差异
！-甲方-
差异
左方甲：/div
div class=右
甲方名称
ng-container * ngtemplate outlet= introduce；上下文：{ data:data . party a } /ng-container
！——也可以这样写——
！-
ng-container[ngtemplate outlet]= introduce
[ngTemplateOutletContext]= { data:data . partya }
/ng-容器
[ngTemplateOutlet]也可以在ng-template上使用。
-
/div
/div
！-乙方-
差异
Class= left 乙方：/div
div class=右
乙方名称
ng-container * ngtemplate outlet= introduce；上下文：{ data:data . party b } /ng-container
/div
/div
！-let-data= data 是从上面传入的值-
ng-template #介绍let-data=data
p合同简介./p
/ng-模板
/divngTemplateOutlet是一个字符串，它定义了模板的模板引用和上下文(ng-template)对象，这样如果有多个模板引用，就可以这样使用。
NgTemplateOutletContext是EmbeddedViewRef附加到的上下文(即ng-template)对象。这应该是一个对象，这个对象的键可以用于本地模板let声明的绑定。$implicit在上下文(即ng-template)对象中使用键会将其值设置为默认值。
NgTemplateOutlet也可以用于外部传入模板。
child.component.html
ng-template[ngtemplate outlet]= TPL ref [ngTemplateOutletContext]= { data:data } /ng-templatechild.component.ts
@ Input()TPL ref:TemplateRefany
ng-template用法
用法一
结合*ngIf，可以直接在html中使用if else语句，而不需要两次添加不同的判断条件。
div * ngIf= textelse no data“{ text } }/div
ng-模板#noData
Class= Gary 尚无数据/div
/ng-模板用法二
使用antd的modalService在页面上创建对话框时，可以用html编写模板，通过引用加载，放在modal的nzContent中(有点混乱，看代码)
ng-tempalte #含量
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。