如何在 Angular 中使用 nativeelement 添加 CSS

在 Angular 中，可以使用 @ViewChild 和 ElementRef 属性来访问 Component 中的元素，从而可以使用其 nativeElement 属性来添加 CSS 样式。

步骤

1. 在 Component 中引入 ViewChild 和 ElementRef，

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

2. 在 Component 中声明 @ViewChild 属性，

@ViewChild('myDiv', { static: false }) myDiv: ElementRef;

3. 在 HTML 模板中添加相应的元素，并声明一个 ID，

<div #myDiv>Hello World!</div>

4. 在 Component 的 ngAfterViewInit() 生命周期中获取元素并添加 CSS 样式，

ngAfterViewInit() {
  this.myDiv.nativeElement.style.color = 'red';
  this.myDiv.nativeElement.style.fontSize = '20px';
}

5. 打开浏览器预览效果。

注意事项

• @ViewChild 相关的属性取值符号为 #；
• ElementRef 中的 nativeElement 属性可以获得 DOM 对象；
• ngAfterViewInit() 是在 Angular 视图加载完毕后才会执行。

参考文献

• Angular - ViewChild and ElementRef Example
• Using @ViewChild in Angular to Access a Child Component, Directive or DOM Element

以上内容介绍了在 Angular 中使用 nativeElement 属性来添加 CSS 样式的步骤。通过 `@ViewChild` 和 `ElementRef` 属性，我们可以获取 Component 中的元素，并使用其 `nativeElement` 属性来添加 CSS 样式。值得注意的是，`ngAfterViewInit()` 是在 Angular 视图加载完毕后才会执行，这是我们在添加 CSS 样式时需要注意的一个点。