在Angular中如何实现文本加粗样式？基础文本编辑器构建指南

在Angular中实现文本加粗样式是构建基础文本编辑器的常见需求，核心是通过数据绑定、指令操作或者渲染器修改文本节点的样式属性，同时需要兼顾用户输入的同步和编辑器状态的维护。

基于ngStyle实现基础加粗功能

最简单的方式是通过ngStyle指令绑定样式对象，根据布尔状态控制文本是否加粗。这种方式适合静态文本或者简单的交互场景。

<div>
  <button (click)="isBold = !isBold">切换加粗</button>
  <p [ngStyle]="{ 'font-weight': isBold ? 'bold' : 'normal' }">待编辑的文本内容</p>
</div>

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

@Component({
  selector: 'app-text-editor',
  templateUrl: './text-editor.component.html',
  styleUrls: ['./text-editor.component.css']
})
export class TextEditorComponent {
  // 控制加粗状态的布尔值
  isBold: boolean = false;
}

结合ngModel实现可编辑文本加粗

如果要让用户可以输入文本并控制加粗，需要结合ngModel实现双向数据绑定，同时绑定样式到输入框或者可编辑区域。

<div>
  <button (click)="toggleBold()">加粗</button>
  <!-- 可编辑的div区域，通过ngModel绑定内容 -->
  <div 
    contenteditable="true" 
    [(ngModel)]="editorContent" 
    [ngStyle]="{ 'font-weight': isBold ? 'bold' : 'normal' }"
    class="editor-area">
  </div>
</div>

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

@Component({
  selector: 'app-text-editor',
  templateUrl: './text-editor.component.html',
  styleUrls: ['./text-editor.component.css']
})
export class TextEditorComponent {
  editorContent: string = '请输入文本内容';
  isBold: boolean = false;

  toggleBold(): void {
    this.isBold = !this.isBold;
  }
}

.editor-area {
  border: 1px solid #ccc;
  min-height: 200px;
  padding: 10px;
  margin-top: 10px;
}

使用Renderer2操作DOM实现加粗

当需要在不直接修改组件模板样式的情况下操作DOM，或者需要处理更复杂的样式逻辑时，可以使用Angular提供的Renderer2服务，避免直接操作原生DOM带来的风险。

<div>
  <button (click)="setBold()">设置加粗</button>
  <button (click)="removeBold()">取消加粗</button>
  <p #targetText>通过Renderer2操作的文本</p>
</div>

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

@Component({
  selector: 'app-text-editor',
  templateUrl: './text-editor.component.html',
  styleUrls: ['./text-editor.component.css']
})
export class TextEditorComponent {
  // 获取模板中的目标元素
  @ViewChild('targetText') targetText!: ElementRef;

  constructor(private renderer: Renderer2) {}

  setBold(): void {
    // 通过Renderer2设置字体加粗样式
    this.renderer.setStyle(this.targetText.nativeElement, 'font-weight', 'bold');
  }

  removeBold(): void {
    // 移除加粗样式
    this.renderer.removeStyle(this.targetText.nativeElement, 'font-weight');
  }
}

封装基础文本编辑器组件

将加粗功能封装到可复用的文本编辑器组件中，同时支持更多基础编辑功能扩展，比如斜体、下划线等。

<div class="editor-container">
  <div class="toolbar">
    <button 
      [class.active]="currentStyle.fontWeight === 'bold'" 
      (click)="changeStyle('fontWeight', 'bold')">
      B
    </button>
  </div>
  <div 
    contenteditable="true" 
    class="editor-body"
    [ngStyle]="currentStyle">
  </div>
</div>

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

@Component({
  selector: 'app-basic-editor',
  templateUrl: './basic-editor.component.html',
  styleUrls: ['./basic-editor.component.css']
})
export class BasicEditorComponent {
  // 存储当前编辑器的样式配置
  currentStyle: { [key: string]: string } = {};

  changeStyle(styleKey: string, value: string): void {
    if (this.currentStyle[styleKey] === value) {
      // 如果已经是目标样式，则移除该样式
      delete this.currentStyle[styleKey];
    } else {
      // 否则设置目标样式
      this.currentStyle = {
        ...this.currentStyle,
        [styleKey]: value
      };
    }
  }
}

.editor-container {
  width: 600px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.toolbar {
  padding: 8px;
  border-bottom: 1px solid #ddd;
  background-color: #f5f5f5;
}

.toolbar button {
  padding: 4px 12px;
  margin-right: 5px;
  cursor: pointer;
}

.toolbar button.active {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
}

.editor-body {
  min-height: 300px;
  padding: 10px;
  outline: none;
}

注意事项

• 使用contenteditable属性时，需要注意浏览器对可编辑区域的兼容性，部分旧版本浏览器可能存在样式同步问题。
• 如果使用双向数据绑定绑定contenteditable元素，需要引入FormsModule模块，否则ngModel指令无法生效。
• 操作DOM时优先使用Renderer2而不是直接访问nativeElement修改属性，这样可以在服务端渲染等场景下避免报错。
• 如果需要支持选中部分文本加粗，需要额外处理window.getSelection()获取选中范围，再针对性修改样式，逻辑会相对复杂一些。

Angular文本加粗文本编辑器ngModelRenderer2修改时间：2026-06-28 14:33:46