本文介绍了在 Angular 应用中，如何通过 CSS 样式控制 textarea 中的文字粗体显示。通过绑定点击事件，并在 TypeScript 代码中修改 textarea 元素的 `fontWeight` 属性，实现点击按钮切换粗体样式的效果。
在 Angular 应用中，为文本添加粗体样式，通常推荐使用 CSS 来实现，而非直接操作 DOM 元素的 innerHTML。以下示例演示了如何通过 Angular 的事件绑定和元素引用，结合 CSS 样式，在 textarea 中实现粗体样式的切换。
HTML 模板 (component.html):
<div class="content">
<!-- toolbar -->
<div class="toolbar-content">
<!-- bold -->
<span (click)="addBoldStyle()">
<mat-icon>format_bold</mat-icon>
</span>
</div>
</div>
<!-- textarea -->
<form [formGroup]="form">
<div class="textarea">
<mat-form-field appearance="outline" style="width: 470px;">
<mat-label>textarea</mat-label>
<textarea #text matInput formControlName="editor" rows="5" style="border-radius: 5px"></textarea>
</mat-form-field>
</div>
</form>在这个 HTML 模板中，我们定义了一个包含粗体按钮的工具栏和一个 textarea 元素。#text 创建了一个模板引用变量，允许我们在组件的 TypeScript 代码中访问这个 textarea 元素。
TypeScript 代码 (component.ts):
import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-your-component', // 替换为你实际的组件选择器
templateUrl: './your-component.html', // 替换为你实际的 HTML 模板路径
styleUrls: ['./your-component.css'] // 替换为你实际的 CSS 样式路径
})
export class YourComponent implements OnInit {
@ViewChild('text') public textarea: ElementRef;
public form: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit(): void {
this.createForm();
}
createForm() {
this.form = this.fb.group({
editor: null,
});
}
addBoldStyle() {
if (this.textarea.nativeElement.style.fontWeight === "bold") {
this.textarea.nativeElement.style.fontWeight = "normal";
} else {
this.textarea.nativeElement.style.fontWeight = "bold";
}
}
}这段 TypeScript 代码定义了一个 addBoldStyle 方法，该方法通过 this.textarea.nativeElement 访问 textarea 元素的原生 DOM 节点。它检查当前的 fontWeight 样式属性，如果已经是 bold，则设置为 normal，否则设置为 bold。 这样实现了切换粗体样式的效果。
注意事项:
- 样式隔离: Angular 组件具有样式隔离特性。确保将相关的 CSS 样式定义在组件的 CSS 文件中，或者使用全局样式。
- 性能优化: 频繁直接操作 DOM 可能会影响性能。对于更复杂的文本编辑器功能，可以考虑使用更专业的富文本编辑器库，它们通常提供了更高效的 DOM 更新机制。
- 类型安全: 使用 ElementRef 访问原生 DOM 元素时，需要注意类型安全。可以使用类型断言来避免 TypeScript 的类型检查错误。例如：(this.textarea.nativeElement as HTMLTextAreaElement).style.fontWeight = "bold";
总结:
通过结合 Angular 的模板语法、事件绑定和元素引用，我们可以方便地使用 CSS 样式来控制文本的显示效果。这种方法比直接操作 innerHTML 更安全、更易于维护，并且符合 Angular 的最佳实践。对于更高级的文本编辑需求，可以考虑使用专门的富文本编辑器库。
