Angular疑问：如何使自定义管道生成的HTML标签生效而非显示为纯文本

问题根源是Angular的插值语法{{ }}会自动转义HTML内容，导致标签被当作纯文本输出。你需要改用属性绑定来渲染HTML：

1. 替换绑定方式 #

把原来的插值代码改成[innerHTML]属性绑定：

<p [innerHTML]="product.sentence | italicArray:product.italicsArray"></p>

2. 可选但重要：处理安全风险 #

如果管道生成的HTML内容来自不可信源（比如用户输入），为避免XSS攻击，要在管道中用DomSanitizer标记内容为安全HTML：

1. 在管道中注入DomSanitizer并修改返回逻辑：

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

@Pipe({ name: 'italicArray' })
export class ItalicArrayPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(text: string, italicsArray: string[]): SafeHtml {
    // 原有逻辑：生成带HTML标签的字符串
    let processedText = text;
    italicsArray.forEach(word => {
      processedText = processedText.replace(new RegExp(word, 'g'), `<span><i>${word}</i></span>`);
    });
    // 标记内容为安全HTML
    return this.sanitizer.bypassSecurityTrustHtml(processedText);
  }
}

修改完成后，生成的<span>和<i>标签就会被正常渲染为斜体样式，不再显示明文标签。

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