Angular中如何将段落选中文本包裹到自定义组件内

你之前的写法存在两个问题：一是用createTextNode插入的内容会被当成纯文本处理，标签不会被解析为DOM元素；二是Angular自定义组件不能直接通过原生DOM API创建，未经Angular编译的组件不会触发生命周期、变更检测等能力，无法正常工作。

正确实现方案如下：

前置依赖 #

需要在当前操作的组件中注入Angular提供的全局工具：

• Angular 14+ 注入ApplicationRef、Injector即可
• 14以下版本额外注入ComponentFactoryResolver

具体实现步骤 #

1. 先获取选中文本的范围，提取选中内容

const selection = window.getSelection();
// 判空避免报错
if (!selection || selection.rangeCount === 0) return;
const range = selection.getRangeAt(0);
// 提取选中的DOM内容，不要直接取toString的纯文本
const selectedContent = range.extractContents();

2. 动态创建SpecialComponent实例

Angular 14+ 写法（推荐） #

// 构造器注入依赖
constructor(private appRef: ApplicationRef, private injector: Injector) {}

// 动态创建组件
const specialCompRef = createComponent(SpecialComponent, {
  environmentInjector: this.appRef.injector,
  elementInjector: this.injector
});

// 将之前提取的选中内容插入到组件的宿主元素内部
specialCompRef.location.nativeElement.appendChild(selectedContent);
// 将组件挂载到Angular的变更检测树，否则组件无法正常工作
this.appRef.attachView(specialCompRef.hostView);
// 将组件插入到选中范围的位置
range.insertNode(specialCompRef.location.nativeElement);
// 清除文本选中状态
selection.removeAllRanges();

// 建议将组件实例存起来，后续销毁时释放资源
this.dynamicComponents.push(specialCompRef);

Angular 14 之前的写法 #

// 构造器注入依赖
constructor(
  private componentFactoryResolver: ComponentFactoryResolver,
  private appRef: ApplicationRef,
  private injector: Injector
) {}

// 动态创建组件
const compFactory = this.componentFactoryResolver.resolveComponentFactory(SpecialComponent);
const specialCompRef = compFactory.create(this.injector);

// 后续操作和14+版本一致
specialCompRef.location.nativeElement.appendChild(selectedContent);
this.appRef.attachView(specialCompRef.hostView);
range.insertNode(specialCompRef.location.nativeElement);
selection.removeAllRanges();
this.dynamicComponents.push(specialCompRef);

注意事项 #

• 动态创建的组件需要手动销毁避免内存泄漏，在当前组件的ngOnDestroy生命周期中统一处理：

private dynamicComponents: ComponentRef<SpecialComponent>[] = [];

ngOnDestroy() {
  this.dynamicComponents.forEach(ref => {
    this.appRef.detachView(ref.hostView);
    ref.destroy();
  });
}

• 如果需要给SpecialComponent传输入参数，直接给实例赋值即可，赋值后可主动触发变更检测：

specialCompRef.instance.customProp = '自定义参数';
specialCompRef.changeDetectorRef.detectChanges();

内容的提问来源于stack exchange，提问作者Chinmay Padole