1. 概念与注意点
在前端开发中，ElementRef 提供对原生 DOM 元素的直接访问，便于实现快速的文本样式变换，例如将文本设为加粗。
直接操作 DOM 虽然简单，但会带来跨平台兼容性、测试和安全性的问题，因此应考虑使用 Renderer2 或者数据绑定的方式来控制样式。
本节聚焦于如何在单个文本节点上应用加粗效果，同时保留对后续维护的灵活性，尤其是在组件间重复使用时的统一性。
import { Component, ElementRef, ViewChild, AfterViewInit, Renderer2 } from '@angular/core';@Component({selector: 'app-bold-example',template: `这是通过 ElementRef 控制的文本加粗示例
`
})
export class BoldExampleComponent implements AfterViewInit {@ViewChild('target') target!: ElementRef;constructor(private renderer: Renderer2) {}ngAfterViewInit() {// 使用 Renderer2 设置样式，兼容性更好，便于测试与维护this.renderer.setStyle(this.target.nativeElement, 'font-weight', 'bold');}
} 2. 逐步实现
2.1 方案选型：ElementRef 与 Renderer2
在实现文本加粗的场景中，ElementRef 提供对目标元素的直接引用，而 Renderer2 提供跨平台的样式修改能力，因此优先级通常是先使用 Renderer2，必要时再结合 ElementRef 获取的元素进行操作。
通过这种组合，可以在保证性能的同时提升代码的可测试性与可维护性，避免直接暴露对 DOM 的操作在业务逻辑中。
2.2 使用 @ViewChild 获取元素并改写样式
为了在模板中的具体文本节点上应用样式，需要先获取该节点的引用，然后再进行样式变更。下面给出一个完整的示例，其中使用 @ViewChild 获取元素，并通过 Renderer2 修改字体粗细。
通过这种方式，可以实现对单个文本节点的“上下文感知”控制，便于后续组合成指令或组件复用。
import { Component, ElementRef, ViewChild, AfterViewInit, Renderer2 } from '@angular/core';@Component({selector: 'app-bold-target',template: `需要加粗的文本内容
`
})
export class BoldTargetComponent implements AfterViewInit {@ViewChild('boldTarget') boldTarget!: ElementRef;constructor(private renderer: Renderer2) {}ngAfterViewInit() {// 将文本加粗this.renderer.setStyle(this.boldTarget.nativeElement, 'font-weight', 'bold');}
} 3. 实践中的无障碍与可维护性
3.1 可访问性与语义建议
虽然通过 font-weight 可以实现视觉上的加粗，但对无障碍用户而言，语义化标记 更重要。因此应尽量使用 <strong> 标签来表达语义含义，而不是仅依赖纯样式变更。
在需要时，可以将加粗动作封装为带有语义含义的指令或组件，如通过绑定数据来切换加粗状态，以便屏幕阅读器正确理解文本的重要性。
3.2 使用类与 CSS 变量实现可维护性
为提高可维护性，建议将样式控制从直接写死在脚本中的实现，转移到 CSS 类的切换。通过 class 或 CSS 变量 来驱动加粗，可以更容易地统一全局样式风格。
在实际代码中，可以将加粗逻辑封装为一个可复用的样式类，并通过 ElementRef/Renderer2 仅触发类的切换，从而达到更清晰的分层结构。
/* styles.css */
.bold-text { font-weight: bold; }
4. 高级技巧与最佳实践
4.1 条件式加粗
当文本的加粗状态取决于数据状态时，可以通过数据绑定实现条件渲染。将条件表达式绑定到文本元素的内联样式或类名上，从而实现状态驱动的样式变化。
使用数据驱动的方式，可以避免直接操作 DOM，提升可测试性与可预测性，同时保留在涉及 ElementRef 的场景中对单一文本节点的控制能力。
@Component({selector: 'app-status-bold',template: `状态文本`
})
export class StatusBoldComponent {isBold = true;
}4.2 指令化封装：创建可复用的 Bold 指令
将文本加粗的逻辑封装成一个可复用的指令，可以在任意元素上快速应用加粗效果，同时保留对 ElementRef 的直接控制能力。
指令式的封装有助于在大型项目中实现统一的行为定义，并且便于通过输入属性控制加粗的开关状态。
import { Directive, ElementRef, Renderer2, Input } from '@angular/core';@Directive({ selector: '[appBold]' })
export class BoldDirective {@Input('appBold') set bold(val: boolean) {this.renderer.setStyle(this.el.nativeElement, 'fontWeight', val ? 'bold' : 'normal');}constructor(private el: ElementRef, private renderer: Renderer2) {}
}5. 调试与测试
5.1 调试步骤
在本地调试时，优先使用浏览器开发者工具检查实际渲染的样式是否被正确应用。Renderer2 的变化应当在 Elements 面板中能看到对应的样式属性；同时通过组件单元测试验证样式变化的行为。
对于通过指令控制的加粗，确保在不同父元素和模板结构下，选择器能稳定定位目标文本，不会因结构性改变而引发样式错位。
5.2 常见问题与排错
若发现文本未加粗，首要排查点包括：元素引用是否正确、Renderer2 调用是否在 ngAfterViewInit 时机执行、以及是否存在 CSS 权重冲突导致覆盖。必要时添加一个全局样式强制权重，例如使用特定的类来最小化冲突。
将加粗逻辑模块化还能帮助定位问题，例如把逻辑放到一个独立的指令或服务中，逐步排查影响范围。
// 使用 BoldDirective 的单元测试伪代码示例
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BoldDirective } from './bold.directive';
import { ElementRef, Renderer2 } from '@angular/core';describe('BoldDirective', () => {it('should apply bold style when input is true', () => {// 测试逻辑省略，核心在于确保样式被正确设置});
});
