在Angular TypeScript类中实现通知消息内带项目符号的HTML列表解决方案

我来帮你搞定这个问题！你的代码没法正常工作主要有两个核心原因：一是大多数Angular通知服务（比如PrimeNG的NotificationService）默认会把HTML转义成纯文本，不会渲染成实际的列表；二是你把所有标签都塞到了同一个<li>里，还用逗号拼接，自然没法显示成逐个的项目符号。

下面是两种最优实现方案，你可以根据自己使用的通知库灵活选择：

方案一：利用通知服务的HTML渲染支持（推荐） #

如果你的通知服务支持渲染HTML（大部分主流库都支持，只是需要手动开启配置），只需要调整代码生成正确的HTML结构，并关闭HTML转义即可：

// 先为每个标签生成独立的<li>元素
const tagItems = this.tagList.map(item => `<li>${item.tag}</li>`).join('');
// 拼接完整的通知内容HTML
const messageContent = `The list below cannot be reached<ul>${tagItems}</ul>`;

// 调用通知服务，关键是开启HTML支持（以PrimeNG为例，不同库参数名可能不同）
this._notificationService.showInfoMessage({
  detail: messageContent,
  escape: false // 关闭转义，让服务渲染HTML而非纯文本
});

关键注意点： #

• escape: false：这是核心配置，不同库的参数名可能不一样，比如有的叫html: true，你需要对应你使用的通知库文档调整这个参数。
• 独立<li>元素：每个标签单独生成一个<li>，这样才能显示成带项目符号的独立列表项，而不是逗号分隔的文本。
• 模板字符串优化：用ES6模板字符串（``）代替加号拼接，避免转义字符和引号的混乱。

方案二：自定义通知组件（灵活度最高） #

如果你的通知服务不支持HTML渲染，或者你需要更复杂的自定义样式/交互，那最好的方式是创建一个自定义通知组件，用Angular原生模板来渲染：

步骤1：创建自定义通知组件 #

以Angular Material的MatSnackBar为例，先创建custom-notification.component.ts：

import { Component, Inject } from '@angular/core';
import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';

@Component({
  selector: 'app-custom-notification',
  templateUrl: './custom-notification.component.html'
})
export class CustomNotificationComponent {
  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: { tagList: any[] }) {}
}

步骤2：编写组件模板（custom-notification.component.html） #

<p>The list below cannot be reached</p>
<ul>
  <li *ngFor="let tag of data.tagList">{{tag.tag}}</li>
</ul>

步骤3：调用自定义组件 #

在你的业务组件中注入MatSnackBar后调用：

import { MatSnackBar } from '@angular/material/snack-bar';
import { CustomNotificationComponent } from './custom-notification.component';

// ... 其他代码
constructor(private _snackBar: MatSnackBar) {}

showNotification() {
  this._snackBar.openFromComponent(CustomNotificationComponent, {
    data: { tagList: this.tagList },
    duration: 5000 // 可选：设置通知显示时长
  });
}

这种方式完全用Angular的模板语法渲染，不会有HTML转义问题，还能自由添加样式和交互，适合复杂的通知场景。

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