Angular修改innerHTML锚点aria-label遇只读属性错误的解决方法

错误原因 #

你遇到的TypeError: Cannot assign to read only property 'testString' of object '[object Object]'，本质是this.data.testString是只读属性，无法直接赋值修改。常见场景包括：

• data是通过@Input()传入的父组件数据，父组件将其设为不可变对象（比如使用Object.freeze或响应式框架的不可变状态）
• data来自不可变数据源（如NgRx Store、服务返回的冻结对象）

解决方案 #

方案1：使用本地变量存储处理后的HTML（推荐） #

不修改原data对象，而是创建本地变量存储处理后的内容，避免触碰只读属性：

1. 在组件类中定义本地变量并处理数据：

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

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  @Input() data: { testString?: string } = {};
  processedTestString: SafeHtml = '';

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit(): void {
    if (!this.data.testString) return;

    let rawHtml = this.data.testString;
    // 精准匹配mailto链接，提取邮箱地址
    const mailtoMatch = rawHtml.match(/href="mailto:([^"]*)"/);
    if (mailtoMatch?.[1]) {
      const email = mailtoMatch[1];
      const ariaLabel = `EmailId ${email}`;
      // 兼容<a标签的大小写、前置空格情况，添加aria-label
      const modifiedHtml = rawHtml.replace(/<a\s/i, `<a aria-label="${ariaLabel}" `);
      // 处理HTML安全，避免Angular拦截渲染
      this.processedTestString = this.sanitizer.bypassSecurityTrustHtml(modifiedHtml);
    } else {
      // 无匹配邮箱时直接处理原HTML
      this.processedTestString = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
    }
  }
}

2. 修改模板，使用本地变量渲染：

<div class="wrapper" [innerHTML]="processedTestString"></div>

方案2：创建data的可修改副本（仅当父组件允许时使用） #

如果必须修改data对象本身，先通过解构创建可修改的副本，再修改属性：

ngAfterViewInit(): void {
  if (!this.data?.testString) return;

  // 解构创建可修改的副本，解除只读限制
  this.data = { ...this.data };
  let rawHtml = this.data.testString;
  
  const mailtoMatch = rawHtml.match(/href="mailto:([^"]*)"/);
  if (mailtoMatch?.[1]) {
    const email = mailtoMatch[1];
    const ariaLabel = `EmailId ${email}`;
    this.data.testString = rawHtml.replace(/<a\s/i, `<a aria-label="${ariaLabel}" `);
    // 可选：若需安全处理，需结合DomSanitizer
    // this.data.testString = this.sanitizer.bypassSecurityTrustHtml(modifiedHtml);
  }
}

注意：此方案会修改data对象引用，可能触发父组件的变更检测，需确认父组件允许这种修改。

方案3：优化正则匹配（适配多场景） #

如果原HTML中有多个<a>标签，或<a>标签前有空格/大小写差异，使用/<a\s/i正则匹配更准确，避免遗漏或错误替换。

关键注意点 #

• 始终结合DomSanitizer处理动态HTML：Angular默认会拦截不安全的HTML内容，使用bypassSecurityTrustHtml确保内容能正常渲染，同时需保证原HTML来源可靠，避免XSS风险。
• 优先在ngOnInit中处理数据：ngAfterViewInit是视图初始化完成后触发，此时修改数据可能导致额外的变更检测，推荐提前在初始化阶段处理。

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