如何简化Angular中*ngIf写法 实现一行编写图标切换条件

最优方案（同时满足两个需求） #

完全可以在同一行完成图标切换，无需多写*ngIf分支，直接在icon属性绑定中使用三元表达式即可，仅需一行代码：

<fa-icon [icon]="isMenuCollapsed ? ['fas', 'bars'] : ['fas', 'times']"></fa-icon>

这种写法的优势：

• 没有冗余模板代码，比你提供的两种参考写法精简70%以上
• 不需要销毁重建fa-icon组件，仅更新属性值，性能更好
• 无需维护正反两个条件，避免逻辑写错

若需切换不同DOM结构的*ngIf精简写法 #

如果你的场景不止是切换图标，还要切换不同的DOM元素/组件，可以用*ngIf自带的else语法糖，比参考示例1的写法更精简：

<fa-icon [icon]="['fas', 'bars']" *ngIf="isMenuCollapsed; else closeTpl"></fa-icon>
<ng-template #closeTpl>
  <fa-icon [icon]="['fas', 'times']"></fa-icon>
</ng-template>

这种写法对比参考写法的优势：

• 比示例1少写1个无用的根ng-template包裹层，代码逻辑更直观
• 比示例2不需要写正反两个*ngIf判断，避免条件写反的问题

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