ng-container vs ngTemplateOutlet

[deepthan]

ng-container vs ngTemplateOutlet

<ng-container> 是一个不会干扰样式或布局的分组元素，Angular 不会将其放入DOM中。

结合结构性指令使用

如ngFor

<ng-container *ngFor="let book of books>
    <div> {{ book }} </div>
</ng-container>

结合ngTemplateOutlet

ngTemplateOutlet是可以把用ng-template包裹的dom元素引入进来，并且可以传递参数过去。

<ng-template #cat >
  <div>一直狸花猫</div>
</ng-template>

<ng-container *ngTemplateOutlet="cat"> </ng-container>

那么如何传递参数呢？ 使用context~

ts定义参数变量

age = '2岁了';
height: "10cm";

html传递参数

<ng-container
    *ngTemplateOutlet="cat; context: { $implicit: age, height: height }">
</ng-container>

<ng-template #cat let-data let-height='height'>
  <div>一直狸花猫</div>
  {{ data }} 
  {{ height }}
</ng-template>

context接收一个对象，如context: { $implicit: age}， $implicit传递的是默认值，在ng-template中使用let-data接收，变量data就是传递过来的值，这是一个固定写法。

还可以传递更多的参数，形如context: { height: height},它其实是这种形式{ key: 参数}, ng-template中取值形式为let-变量=context定义的key，这个变量即为传递过来的参数。