Angular中HTML sanitize后属性转为小写的问题求助

问题根源是Angular通过innerHTML插入内容时，会将所有HTML属性转为小写，而PrimeNG的pInputText指令依赖区分大小写的属性选择器，小写后的pinputtext无法触发指令。以下是两种可行的解决方案：

方案1：用ComponentFactoryResolver动态创建组件（推荐） #

这是Angular官方推荐的动态内容创建方式，能完整保留属性大小写和指令绑定：

1. 先定义一个通用的表单字段组件：

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

@Component({
  selector: 'dynamic-input',
  template: `<input pInputText [formControl]="control" [placeholder]="placeholder">`
})
export class DynamicInputComponent {
  @Input() control: any;
  @Input() placeholder: string;
}

2. 在父组件中通过ComponentFactoryResolver动态创建实例：

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { DynamicInputComponent } from './dynamic-input.component';

@Component({
  selector: 'app-form',
  template: `<div #inputContainer></div>`
})
export class FormComponent {
  @ViewChild('inputContainer', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  createDynamicInput() {
    const factory = this.resolver.resolveComponentFactory(DynamicInputComponent);
    const componentRef = this.container.createComponent(factory);
    // 传递输入属性
    componentRef.instance.control = yourFormControl;
    componentRef.instance.placeholder = 'Enter value';
  }
}

方案2：手动修正DOM属性（应急方案） #

如果必须使用innerHTML，可以在内容插入后手动修改DOM元素的属性，恢复正确的大小写：

import { Component, ElementRef, Renderer2 } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-form',
  template: `<div [innerHTML]="safeHtml"></div>`
})
export class FormComponent {
  safeHtml: SafeHtml;

  constructor(
    private sanitizer: DomSanitizer,
    private el: ElementRef,
    private renderer: Renderer2
  ) {
    const rawHtml = '<input type="text" pInputText placeholder="Enter value">';
    this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
  }

  ngAfterViewInit() {
    // 找到插入的input元素
    const inputEl = this.el.nativeElement.querySelector('input');
    if (inputEl) {
      // 移除小写的属性，添加正确大小写的pInputText属性
      inputEl.removeAttribute('pinputtext');
      this.renderer.setAttribute(inputEl, 'pInputText', '');
    }
  }
}

注意：方案2属于DOM操作的hack方式，不推荐在复杂场景使用，因为可能会和Angular的变更检测机制冲突。优先选择方案1的组件动态创建方式。

内容的提问来源于stack exchange，提问作者Ale Yanczuk