首先

由于有几种绑定和直接DOM操作的方法可以在动态地修改CSS中，则进行了总结。
希望这对将来在Angular中进行实现的人们有所帮助。

版本

Angular: 9.1.11 的版本确认方式请参考过往文章中的说明。

NgStyle：样式指令

参考：Angular中的NgStyle

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent {
  color = "red";
  style = {'width': '50px', 'height': '50px','background-color':'red'};

  constructor() { }

  onClickChangeColor() {
    this.color = "blue";
  }

  onClickChangeObject() {
    this.style = {'width': '100px', 'height': '100px','background-color':'blue'};
  }
}

<div [ngStyle]="{'width': '100px', 'height': '100px','background-color': color}"></div>
<button (click)="onClickChangeColor()">カラー変更</button>

<div [ngStyle]="style"></div>
<button (click)="onClickChangeObject()">オブジェクト変更</button>

样式绑定

参考：Angular中的类和样式绑定

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent {
  color1 = "red";
  color2 = "red";
  style = {'width': '50px', 'height': '50px','background-color':'red'};

  constructor() { }

  onClickChangeColor1() {
    this.color1= "blue";
  }

  onClickChangeColor2() {
    this.color2= "blue";
  }

  onClickChangeObject() {
    this.style = {'width': '100px', 'height': '100px','background-color':'blue'};
  }
}

<div [style.background-color]="color1" style="width: 100px; height : 100px;"></div>
<button (click)="onClickChangeColor1()">カラー変更1</button>

<div [style]="{'width': '100px', 'height': '100px','background-color': color2}"></div>
<button (click)="onClickChangeColor2()">カラー変更2</button>

<div [style]="style"></div>
<button (click)="onClickChangeObject()">オブジェクト変更</button>

渲染器2

参考：Angular 二代渲染器

import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent {
	@ViewChild('element') public element: ElementRef;

  constructor(
    private renderer: Renderer2
  ) { }

  ngAfterViewInit(): void {
    console.log(this.element);
  }

  onClickChangeColor() {
    this.renderer.setStyle(this.element.nativeElement, 'background-color', 'blue');
  }
}

<div #element style="width: 100px; height: 100px; background-color: red"></div>
<button (click)="onClickChangeColor()">カラー変更</button>

留意

以下两点不被推荐：
基本上，直接访问DOM好像是不好的。
请详细参考Angular:ElementRef#properties的USE WITH CAUTION以获取更多信息。

查看子视图 zǐ

参考：Angular中的ViewChild

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent {
	@ViewChild('element') public element: ElementRef;

  constructor() { }

  public ngAfterViewInit(): void {
    this.element.nativeElement.style.width = "100px";
    this.element.nativeElement.style.height = "100px";
    this.element.nativeElement.style.backgroundColor = "red";
  }

  onClickChangeColor() {
    this.element.nativeElement.style.backgroundColor = "blue";
  }
}

<div #element></div>
<button (click)="onClickChangeColor()">カラー変更</button>

查看子组件

参考资料：Angular：ViewChildren
请参考 Angular：QueryList 来了解更详细的使用方法，因为 #elements 变量已经被设置为 QueryList。

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent {
	@ViewChildren('elements') public elements: QueryList<ElementRef>;

  constructor() { }

  public ngAfterViewInit(): void {
    console.log(this.elements);
  }

  onClickChangeColor() {
    for(let element of this.elements) {
      element.nativeElement.style.width = "100px";
      element.nativeElement.style.height = "100px";
      switch(element.nativeElement.id) {
        case "ele1":
          element.nativeElement.style.backgroundColor = "red";
          break;

        case "ele2":
          element.nativeElement.style.backgroundColor = "blue";
          break;

        case "ele3":
          element.nativeElement.style.backgroundColor = "yellow";
          break;
      }
    }
  }
}

<div #elements id="ele1"></div>
<div #elements id="ele2"></div>
<div #elements id="ele3"></div>
<button (click)="onClickChangeColor()">カラー変更</button>

补充

#element,#elementsはテンプレート変数です。テンプレート変数はAngular:Understanding template variablesを確認してください。
ViewChild、ViewChildrenで#element,#elements取得時の注意

#element,#elementsはngAfterViewInit()以降で取得することができます。
ちなみにngAfterViewInit()はライフサイクルの一つです。
ライフサイクルの順序は下記のようになっています。

ngOnChanges()
ngOnInit()
ngDoCheck()
ngAfterContentInit()
ngAfterContentChecked()
ngAfterViewInit()
ngAfterViewChecked()
ngOnDestroy()

文献引用

Angular: NgStyle -> Angular: NgStyle指令
Angular: Class and style binding -> Angular: 类和样式绑定
Angular: Renderer2 -> Angular: Renderer2服务
Angular: ViewChild -> Angular: ViewChild装饰器
Angular: ViewChildren -> Angular: ViewChildren装饰器
Angular: ElementRef#properties -> Angular: ElementRef#properties属性
Angular: QueryList -> Angular: QueryList类型
Angular: Understanding template variables -> Angular: 理解模板变量