Angular 7 ngStyle指令

在Angular 7应用程序中，ngStyle指令用于动态设置HTML元素的样式。使用ngStyle指令可以根据应用程序中的数据来设置元素的样式。

用法

ngStyle指令可以应用于任何HTML元素，包括div，p，span等。

要使用ngStyle指令，请按以下方式设置它：

<div [ngStyle]="myStyles"></div>

在上面的代码中，myStyles是一个对象，包含要应用于元素的CSS样式属性和值。例如：

myStyles = {
   'color': 'red',
   'font-size': '20px'
}

myStyles对象具有CSS属性和值的键值对，这些CSS属性和值应该在应用程序中动态设置。

要在Angular中动态更新ngStyle指令，请使用ngStyle绑定将数据绑定到myStyles对象。例如：

@Component({
   selector: 'app-my-component',
   template: `
      <div [ngStyle]="myStyles">
         Hello, ngStyle!
      </div>
   `
})
export class MyComponent {
   myStyles = {
      'color': 'red',
      'font-size': '20px'
   };
 
   changeText() {
      this.myStyles['color'] = 'blue';
      this.myStyles['font-size'] = '30px';
   }
}

上面的代码中，changeText()函数动态更改myStyles对象的属性和值。这将导致HTML元素的样式随之更改。

常用属性

ngStyleChange

ngStyleChange属性用于捕获ngStyle指令绑定的对象的更改。

<div [ngStyle]="myStyles" (ngStyleChange)="onStylesChange($event)"></div>

在上面的代码中，当myStyles对象的属性或值更改时，onStylesChange()函数将被调用。

总结

ngStyle指令可以用于动态设置HTML元素的样式。它可以根据应用程序中的数据来设置元素的样式。在实际开发中，ngStyle指令非常有用，因为它可以帮助我们在运行时更改元素的样式。