angular中ng-container与ng-template用法

ng-container与ng-template用法

目录

1.ng-container与ng-template概念

ng-container既不是一个Component,也不是一个Directive,只是单纯的一个特殊tag。
这点类似于template,Angular复用了HTML5规范中template 的tag的语义,不过并没有真正利用其实现,因此在审查元素中是永远也找不到一个template元素的。
不过,由于ng-container并不是HTML5中的,为了保持区分度,采用了ng-作为前缀。所以现在我们可以知道,ng-container是Angular所定义的一个特殊tag。

一般来说ng-container会与ng-template一起使用,ng-template 定义模板通过声明引用变量#menuItems供ng-container调用,而ng-container使用menuItems来调用ng-template

<ng-template let-items="items" #menuItems>
  <ul class="tree">
    <ul *ngFor="let item of items">
      <li>
        <a [routerLink]="item.link">{{item.name}}</a>
        <ng-container *ngTemplateOutlet="menuItems; context: {items: item.children}"></ng-container>
      </li>
    </ul>
  </ul>
</ng-template>

<ng-container *ngTemplateOutlet="menuItems; context: {items: menuItems$ | async}"></ng-container>

2.ng-container递归调用ng-template标签

通过ng-container 中的ngTemplateOutlet属性的context字段来传递参数,ng-template中通过let-属性名方式来接收参数。这类似调用函数时的形参。如果context中的形参为空,则angular不会植入tag。递归调用的原理就是利用了参数为空时,不植入多余tag。这也是ng-container区别div标签所在。

3.*ngTemplateOutlet

ngTemplateOutlet为一指针,指向对应的模板进行输出。


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://www.cnblogs.com/JerryMouseLi/p/15798702.html
上一篇:ng-tempalte和ng-container及利用ngTemplateOutlet遍历树形结构数据


下一篇:AngularJs笔记