angular 通过ts修改css样式

Angular 通过TypeScript (TS) 修改CSS样式通常涉及使用模板（template）、CSS类绑定（class binding）以及指令（directives）。当你需要根据组件的状态或数据动态改变元素的样式时，可以这样做：

1. **模板（HTML）**：在HTML模板中，你可以将CSS类名绑定到属性上，例如 `[ngClass]` 或 `[class.]`，这允许你在JavaScript表达式中设置类名。

<div [ngClass]="{'active': isActive}">...</div>

这里，`isActive` 是一个 TypeScript 变量，当其值为真时，`active` 类会被应用到元素上。

2. **CSS Class Bindings**：在TypeScript中，你可以创建并更新这些绑定的条件。例如，如果你有一个 `isActive` 的布尔变量，你可以像下面这样处理：

@Component({
  selector: 'my-component',
  template: `
    <div [ngClass]="{'active': isActive}">
      Content
    </div>
  `,
})
export class MyComponent {
  isActive = false; // 这里可以根据业务逻辑改变这个值
}

3. **内联样式（Inline Styles）**：如果你想直接改变元素的样式，可以在模板里使用双大括号 `{{}}` 表达式：

<div style="color: {{getColor()}};">Text</div>

然后在 TypeScript 中定义 `getColor()` 函数返回相应的颜色。

4. **Angular 指令**：如果需要更复杂的行为，可以自定义指令，如 `NgStyle`，它允许你动态设置行内样式：

@Component({
  selector: 'app-style-directive',
  template: `<div [ngStyle]="styleObject"></div>`,
})
export class StyleDirective {
  @Input('style') styleObject: { [key: string]: string };
}

在这个例子中，你可以传递一个对象给 `styleObject`，它的键是 CSS 属性，值是对应的值。