如何在Angular中有条件增删fxLayout和fxLayoutAlign属性

问题原因 #

你之前的写法不生效是因为没有使用Angular的属性绑定语法，直接写fxLayoutAlign="xxx"会被识别为静态字符串赋值，Angular不会解析内部的表达式，同时空字符串也无法触发Flex Layout指令的移除逻辑。

可行实现方案 #

方案1：指令动态绑定（推荐）

给Flex Layout指令加上方括号[]启用动态绑定，条件不满足时返回null，框架会自动移除对应的属性和布局效果：

<div 
  *ngIf="name === 'A'" 
  fxFlex="50%"
  [fxLayout]="myCondition ? 'row' : null"
  [fxLayoutAlign]="myCondition ? 'start center' : null"
>
...
</div>

方案2：结构指令拆分

如果布局逻辑差异较大，也可以用*ngIf拆分两个模板，可读性更高：

<!-- 满足条件时带布局属性 -->
<div *ngIf="name === 'A' && myCondition" fxFlex="50%" fxLayout="row" fxLayoutAlign="start center">
...
</div>
<!-- 不满足条件时不带布局属性 -->
<div *ngIf="name === 'A' && !myCondition" fxFlex="50%">
...
</div>

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