Angular 10 中的 NgStyle 是什么？

在 Angular 10 中，NgStyle 是一个内置的指令，用于动态地为 HTML 元素设置样式。通过使用 NgStyle 指令，开发人员可以在应用程序的组件中动态地设置一组 CSS 样式。

使用 NgStyle 指令

要使用 NgStyle 指令，只需将其添加到 HTML 元素上，并将其绑定到一个属性。例如，假设我们想要设置一个 div 元素的样式，我们可以使用以下代码：

<div [ngStyle]="{'color': 'red', 'font-size': '2em'}">This is a red text with 2em font size</div>

这个例子将为 div 元素设置一个红色文字，并将字体大小设置为 2em。

动态地设置样式

与上面的例子不同，可以使用从组件定义的样式属性和值来动态地设置样式。为此，可以在组件中定义一个样式对象，然后将其绑定到 NgStyle 指令。例如：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div [ngStyle]="styleObject">This is some text</div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  styleObject = {
    color: 'red',
    'font-size': '2em'
  };
}

这个例子定义了一个样式对象，并将其绑定到 NgStyle 指令上。当应用程序运行时，它会动态地将这些样式应用到 div 元素上。

总结

NgStyle 是 Angular 10 内置的指令之一，用于动态地设置 HTML 元素的样式。使用 NgStyle 指令，开发人员可以动态地设置一组样式属性和值，从而在应用程序中创建动态样式。