Angular中内置属性型指令NgStyle的使用

可以用 NgStyle 根据组件的状态同时设置多个内联样式。

要使用 NgStyle，请向组件类添加一个方法。

在下面的例子中，setCurrentStyles() 方法基于该组件另外三个属性的状态，用一个定义了三个样式的对象设置了 currentStyles 属性。 app.component.ts

currentStyles: Record<string, string> = {};
/* . . . */
setCurrentStyles() {
  // CSS styles: set per current state of component properties
  this.currentStyles = {
    'font-style':  this.canSave      ? 'italic' : 'normal',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
  };
}

要设置元素的样式，请将 ngStyle 属性绑定到 currentStyles。

<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>

实战1：

<p [ngStyle]="{'width':spanLabelFixed+'px'}"></p>

实战2：

<p [ngStyle]="styleMethod()"}"></p>

// ts中

styleMethod() {

    const style = {

      width: this.spanLabelFixed + 'px'

    };

    return style;

  }