Angular预加载时如何禁止div渲染，过滤*ngFor中right对齐的ng-template

你可以根据是否需要保留alignment为right对应的外层div，选择以下两种实现方式，两种方案都可以做到符合条件的内容完全不进入DOM渲染链路，不会在预加载阶段生成多余节点：

方案1：过滤ngFor数据源（性能最优，无多余DOM生成） #

如果你不需要保留alignment为right的外层div，直接在循环数据源层面做过滤，从根源上不会生成对应节点：

模板代码 #

<div
  *ngFor="let d of leftAlignedData"
  class="key-value"
>
  <!-- 直接放置原来在ng-template中的渲染内容即可 -->
</div>

TS代码（提前过滤数据源，避免模板内执行函数导致性能损耗） #

// 在拿到原始data数据后执行过滤，赋值给单独变量
this.leftAlignedData = this.data.data.filter(item => item.alignment === 'left');

方案2：保留外层div，仅隐藏内部内容 #

如果需要保留外层div（比如要设置占位样式、绑定统一事件等），可以用*ngIf结构型指令控制内部内容的渲染，你原有代码的逻辑其实已经可以实现需求，也可以改用更简洁的ng-container写法减少模板冗余：

<div
  *ngFor="let d of data.data"
  [ngClass]="{ 'key-value': d.alignment === 'left' }"
>
  <ng-container *ngIf="d.alignment === 'left'">
    <!-- 原来放在ng-template中的内容移到此处即可 -->
  </ng-container>
</div>

注：Angular的结构型指令在条件不满足时，会完全跳过对应模板的解析和DOM生成，不会出现预加载渲染多余内容的问题。

内容的提问来源于stack exchange，提问作者Bidisha Das