浅谈Angular模板指令：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: TemplateRefany>
    

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: TemplateRefany>
    ;
    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: TemplateRefany>
  isTemplate(text: any) {
          return text instanceof TemplateRef;
  }
}
    

总结，都是一些最基础的用法，现在所了解的就这些用法，如果有知道更多的欢迎大家补充。

更多编程相关知识，请访问：编程视频！！

以上就是浅谈Angular模板指令：ng-template和ng-container的用法的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！