Angular中用TypeScript修改元素背景色的自然实现方式咨询

我之前用JavaScript开发，习惯了通过name.style.color='red'这类写法直接修改元素CSS属性，但转到Angular用TypeScript开发时，直接照搬这种写法却无效。

原生JavaScript实现代码 #

HTML #

<div id="blue" style="background-color:red;">
    Hello
</div>
<button id="it">Press</button>

JavaScript #

let blue = document.getElementById("blue");
let it = document.getElementById("it");
it.onclick = () => blue.style.backgroundColor = "blue";

尝试的无效Angular代码 #

HTML #

<div id="blue" style="background-color:red;">
  Hello
</div>
<button (click)="switch()">Press</button>

TypeScript #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my_app_2';

  blue = document.getElementById("blue");

  switch() {
    this.blue.style.backgroundColor = "blue";
  }
}

为什么无效？ 组件初始化阶段，DOM还未完成渲染，document.getElementById("blue")会返回null，调用this.blue.style时会触发错误。

已实现的ngStyle方案 #

我找到一种使用ngStyle的解决方案，但想找更贴近原生JS写法的实现方式：

HTML #

<div id="blue" [ngStyle]="clicked ? {'background-color':'blue'} : {'background-color':'red'}">
  Hello
</div>
<button (click)="switch()">Press</button>

TypeScript #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my_app_2';
  clicked = false;

  switch() {
    this.clicked = !this.clicked;
  }
}

贴近原生JS的实现方案 #

Angular推荐用模板引用变量+ViewChild获取DOM元素，既贴近原生操作逻辑，又符合框架生命周期规范：

1. 修改模板添加引用变量 #

给目标元素添加模板引用（比如#blueDiv），同时避免使用switch作为方法名（它是JS关键字）：

<div #blueDiv style="background-color:red;">
  Hello
</div>
<button (click)="switchColor()">Press</button>

2. 在组件中获取元素并操作样式 #

导入ViewChild和ElementRef，借助Angular生命周期钩子确保DOM渲染完成后再操作：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'my_app_2';
  @ViewChild('blueDiv') blueDiv!: ElementRef<HTMLDivElement>;

  ngAfterViewInit() {
    // 此时DOM已渲染，可安全访问元素
  }

  switchColor() {
    // 通过nativeElement拿到原生DOM对象，直接操作style属性
    this.blueDiv.nativeElement.style.backgroundColor = 'blue';
  }
}

如果需要切换颜色（红/蓝交替），可以扩展方法：

switchColor() {
  const currentColor = this.blueDiv.nativeElement.style.backgroundColor;
  this.blueDiv.nativeElement.style.backgroundColor = currentColor === 'red' ? 'blue' : 'red';
}

说明：nativeElement就是你熟悉的原生DOM对象，和document.getElementById获取的对象完全一致，所以可以像原生JS那样直接用style属性修改样式，完美贴合你的使用习惯。

内容的提问来源于stack exchange，提问作者Adil