Angular中ngStyle修改对象属性不生效仅替换对象生效问题咨询

问题场景 #

开发Angular组件时，通过属性绑定将配置对象传递给目标组件，给.style属性重新赋值新对象时borderRadius样式可正常更新，但直接给已有style对象的属性键赋值时样式不会生效，涉及代码如下：

父组件属性绑定代码 #

<app-element text="Test4" (click)="selectItem(item.id)" [elProp]="getProperty(item.id)"></app-element>

ElementComponent组件模板代码 #

<div
  fxLayout="row"
  [fxLayoutAlign]="property.text?.style?.position"
  style="background-color: rgb(51, 134, 153);"
  [ngStyle]="elProp.style"
  [ngClass]="{ 'selectedItem': elProp.selected}"
>
  {{ elProp?.text?.value }}
</div>

触发样式更新的输入框代码 #

<input type="text" class="form-control" id="borderradius" (ngModelChange)="updateStyle()" >

样式更新方法实现 #

updateStyle(){
    this.itemProperty.map(el=>{
      if(el.itemId == this.selectedId)
        //  el.style.borderRadius = "20px"; <<< 不生效
        //  el.style['borderRadius'] = "20px"; <<< 不生效
        // Object.assign(el.style,{borderRadius: "20px"}); <<< 不生效
        el.style = {borderRadius: "20px"}; <<< 正常生效
    })
  }

对应数据模型定义 #

export interface ItemProperty {
    itemId: string;
    selected : boolean;
    color: string;
    border: string;
    text: {
      value: string,
      style: {
        position: string
      },
    };
    style:{
      borderRadius: string;
     // border: string,
    };
  }

原因说明 #

这既不是代码编写错误，也不是框架Bug，是Angular变更检测机制与ngStyle指令的更新判断逻辑共同导致的正常现象：

• Angular默认变更检测对绑定的输入值做引用一致性校验，不会深度遍历对象内部属性的变化。
• 直接修改el.style已有对象的属性（包括点赋值、键赋值、Object.assign合并属性）时，el.style的内存引用地址没有发生变化，Angular变更检测运行时判定绑定值没有更新，不会触发ngStyle的样式重算逻辑，因此样式不生效。
• 给el.style重新赋值一个新对象时，el.style的引用地址发生变化，Angular检测到绑定值变更，会将新的样式对象传入ngStyle指令，指令重新计算并应用样式，因此可以正常生效。
• 额外注意：父组件模板中直接用[elProp]="getProperty(item.id)"绑定方法返回值的写法存在性能隐患，每次变更检测运行都会执行该方法，如果方法返回新对象会触发不必要的组件重绘，建议提前将绑定值预处理为实例属性，避免在模板中直接调用方法。

可行解决方案 #

• 优先使用不可变数据更新方式：也就是当前生效的重新赋值写法，符合Angular单向数据流设计理念，性能最优。如果需要保留原有style对象的其他属性，可以用对象展开运算符实现：el.style = {...el.style, borderRadius: "20px"}，不会丢失其他已配置的样式。
• 如果必须修改原对象属性，可以在组件中注入ChangeDetectorRef，修改完属性后调用this.cdr.markForCheck()手动通知Angular触发视图更新，不过这种方式性能弱于不可变数据写法，非必要不推荐。

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