Angular中实现文本加粗功能：基于ElementRef的样式控制指南

<div class="content">
  <!-- 工具栏 -->
  <div class="toolbar-content">
    <!-- 加粗按钮 -->
    <span (click)="addBoldStyle()">
      <mat-icon>format_bold</mat-icon>
    </span>
  </div>
</div>

<!-- 文本输入区域 -->
<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>

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon'; 
import { MatFormFieldModule } from '@angular/material/form-field'; 
import { MatInputModule } from '@angular/material/input'; 
import { ReactiveFormsModule } from '@angular/forms'; 
import { CommonModule } from '@angular/common'; 

@Component({
  selector: 'app-root',
  standalone: true, 
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MatIconModule,
    MatFormFieldModule,
    MatInputModule
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // 使用@ViewChild获取textarea的ElementRef
  @ViewChild('text') public textarea: ElementRef;

  public form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.createForm();
  }

  // 初始化响应式表单
  createForm(): void {
    this.form = this.fb.group({
      editor: [null], // 初始化editor控件
    });
  }

  // 触发加粗样式的方法
  addBoldStyle(): void {
    console.log('Applying bold style');
    // 直接设置原生DOM元素的fontWeight样式
    this.textarea.nativeElement.style.fontWeight = "bold";
  }
}

  addBoldStyle(): void {
    const currentWeight = this.textarea.nativeElement.style.fontWeight;
    if (currentWeight === "bold" || currentWeight === "700") { // "bold"在某些浏览器中中可能解析为"700"
      this.textarea.nativeElement.style.fontWeight = "normal"; // 取消加粗
    } else {
      this.textarea.nativeElement.style.fontWeight = "bold"; // 设置加粗
    }
    console.log('Toggled bold style to:', this.textarea.nativeElement.style.fontWeight);
  }

.bold-text {
  font-weight: bold;
}

  addBoldStyle(): void {
    this.textarea.nativeElement.classList.toggle('bold-text');
    console.log('Toggled bold-text class. Current classes:', this.textarea.nativeElement.classList);
  }