Angular：innerHTML绑定含指令的img被HTML sanitize拦截的解决方法

Angular的[innerHTML]不支持解析Angular模板语法（比如[src]、(click)这类指令），不管有没有用DomSanitizer都无法生效——因为Angular只会把[innerHTML]的内容当成纯HTML渲染，不会编译成组件模板，而且非标准的HTML属性会被安全过滤掉，这就是你看到[src]被移除的核心原因。

推荐方案：用*ngFor循环生成元素（符合Angular最佳实践） #

这是最直接也最安全的方式，完全满足你循环生成内容的需求，不需要依赖innerHTML。

HTML代码 #

<div class="grid-container">
  <!-- 遍历每一行 -->
  <div *ngFor="let row of table; let rowIndex = index">
    <!-- 遍历行内每个单元格 -->
    <img
      *ngFor="let cell of row; let colIndex = index"
      [src]="getImgPath(cell)"
      (click)="handleCellClick(rowIndex, colIndex)"
      alt="单元格图片"
      class="grid-cell"
    >
  </div>
</div>

TypeScript代码 #

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

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css']
})
export class GridComponent {
  table: string[][] = [
    ["b0", "b1", "b2", "b3", "b4", "b2", "b1", "b0"],
    ["b5", "b5", "b5", "b5", "b5", "b5", "b5", "b5"],
    ["", "", "", "", "", "", "", ""],
    ["", "", "", "", "", "", "", ""],
    ["", "", "", "", "", "", "", ""],
    ["", "", "", "", "", "", "", ""],
    ["w5", "w5", "w5", "w5", "w5", "w5", "w5", "w5"],
    ["w0", "w1", "w2", "w3", "w4", "w2", "w1", "w0"]
  ];

  // 生成图片路径
  getImgPath(cellValue: string): string {
    return cellValue ? `${cellValue}.png` : 'empty.png';
    // 注意：如果图片在assets文件夹下，要写成 `assets/${cellValue}.png`
  }

  // 处理单元格点击
  handleCellClick(rowIndex: number, colIndex: number): void {
    console.log(`点击了行${rowIndex}，列${colIndex}`);
    // 这里写你的点击逻辑
  }
}

这个方案的优势：

• 完全遵循Angular的模板语法规范，安全可靠
• 直接绑定组件内的方法和属性，无需额外处理安全问题
• 代码可读性高，易维护

备选方案：用innerHTML结合原生HTML（不推荐） #

如果因为特殊需求必须用innerHTML，可以将Angular指令替换为原生HTML属性和事件，再手动处理交互：

HTML代码 #

<div [innerHTML]="generateGridHtml()" (click)="handleGridClick($event)"></div>

TypeScript代码 #

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

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css']
})
export class GridComponent {
  table: string[][] = [
    ["b0", "b1", "b2", "b3", "b4", "b2", "b1", "b0"],
    ["b5", "b5", "b5", "b5", "b5", "b5", "b5", "b5"],
    ["", "", "", "", "", "", "", ""],
    ["", "", "", "", "", "", "", ""],
    ["", "", "", "", "", "", "", ""],
    ["", "", "", "", "", "", "", ""],
    ["w5", "w5", "w5", "w5", "w5", "w5", "w5", "w5"],
    ["w0", "w1", "w2", "w3", "w4", "w2", "w1", "w0"]
  ];

  constructor(private sanitizer: DomSanitizer) {}

  // 生成纯HTML字符串
  generateGridHtml(): SafeHtml {
    let htmlStr = '';
    this.table.forEach((row, rowIndex) => {
      row.forEach((cell, colIndex) => {
        const imgSrc = this.getImgPath(cell);
        // 用data属性存储行列索引，原生onclick无法直接调用组件方法
        htmlStr += `<img src="${imgSrc}" data-row="${rowIndex}" data-col="${colIndex}" alt="单元格">`;
      });
      htmlStr += '<br>';
    });
    // 绕过安全检查
    return this.sanitizer.bypassSecurityTrustHtml(htmlStr);
  }

  getImgPath(cellValue: string): string {
    return cellValue ? `${cellValue}.png` : 'empty.png';
  }

  // 统一处理点击事件
  handleGridClick(event: MouseEvent): void {
    const target = event.target as HTMLImageElement;
    if (target.tagName === 'IMG') {
      const rowIndex = parseInt(target.dataset.row || '0', 10);
      const colIndex = parseInt(target.dataset.col || '0', 10);
      this.handleCellClick(rowIndex, colIndex);
    }
  }

  handleCellClick(rowIndex: number, colIndex: number): void {
    console.log(`点击了行${rowIndex}，列${colIndex}`);
  }
}

这个方案的缺点：

• 需要手动处理事件绑定和参数传递，代码更繁琐
• 使用bypassSecurityTrustHtml会带来潜在的XSS风险（如果内容来自不可信来源）
• 不符合Angular组件化的设计思想，后期维护成本高

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