angular中ng-container与ng-template用法

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标签所在。