如何在PrimeNG的p-menu中将文本符号转换为实体符号？

要把™、™这类文本形式的HTML实体转换成对应的符号（™、®），可以用以下两种实用方法：

方法一：通过[innerHTML]让Angular解析实体 #

p-menu默认会把菜单项的label当作纯文本渲染，不会解析HTML实体。你可以自定义菜单项模板，用[innerHTML]绑定label，让Angular自动解析实体：

1. 组件中定义菜单数据：

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  items: MenuItem[] = [
    { label: 'Product™' },
    { label: 'Premium Service™' }
  ];
}

2. 模板中自定义菜单项模板：

<p-menu [model]="items">
  <ng-template pTemplate="item" let-item>
    <span [innerHTML]="item.label"></span>
  </ng-template>
</p-menu>

方法二：在组件中预转换实体为符号 #

如果不想依赖innerHTML，可以在组件里先把文本实体转换成对应符号，再绑定给菜单。推荐用DOMParser来做解析，避免手动替换的繁琐：

1. 组件中添加转换函数并处理菜单数据：

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  items: MenuItem[];

  constructor() {
    this.items = [
      { label: this.convertEntity('Product™') },
      { label: this.convertEntity('Premium Service™') }
    ];
  }

  private convertEntity(text: string): string {
    const parser = new DOMParser();
    const doc = parser.parseFromString(`<div>${text}</div>`, 'text/html');
    return doc.body.firstChild.textContent;
  }
}

2. 模板直接使用默认渲染：

<p-menu [model]="items"></p-menu>

安全提示 #

如果菜单内容来自用户输入，使用innerHTML时要注意XSS风险。可以用Angular的DomSanitizer把内容标记为安全HTML：

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

// 注入DomSanitizer
constructor(private sanitizer: DomSanitizer) {}

getSafeLabel(text: string): SafeHtml {
  return this.sanitizer.bypassSecurityTrustHtml(text);
}

模板中修改为：

<span [innerHTML]="getSafeLabel(item.label)"></span>

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