Angular中如何从TypeScript传递UTF-8箭头→到HTML并正常渲染？

1. 修复TypeScript方法的逻辑错误 #

原方法的for循环在第一次迭代就直接return，导致永远只返回第一个手机号，同时viewArr应为currentUser的笔误，修正后代码如下：

public getUserPhones(userId: string): string {
  const currentUser = this.users.find((user) => user.userId === userId);
  // 修正笔误，从当前用户对象中获取手机号数组，空值兜底
  const userPhonesArray = currentUser?.phoneNumbers || [];

  if (userPhonesArray.length === 0) {
    return '';
  }

  // 用纯文本箭头和换行符拼接每一行，避免HTML实体解析问题
  return userPhonesArray.map(phone => `→ ${phone}`).join('\n');
}

2. 让matTooltip支持多行显示 #

matTooltip默认会忽略换行符，需要添加自定义CSS类来启用换行：

步骤1：HTML绑定调整 #

直接用纯文本换行符\n拼接用户名和手机号内容：

<div *ngFor="let user of users"
     [matTooltip]="user.name + '\n' + getUserPhones(user.userId)"
     matTooltipClass="multiline-tooltip">
  <!-- 这里放用户列表的内容 -->
</div>

步骤2：添加全局CSS样式 #

在项目的全局样式文件（如styles.scss或styles.css）中添加以下样式，让tooltip识别换行符：

.multiline-tooltip {
  white-space: pre-line;
}

3. 可选：用HTML实体实现箭头（需处理安全HTML） #

如果一定要用→这类HTML实体，需要借助DomSanitizer处理安全HTML字符串：

步骤1：注入DomSanitizer #

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

@Component({
  // 组件元数据
})
export class YourComponent {
  constructor(private sanitizer: DomSanitizer) {}

  public getUserPhones(userId: string): SafeHtml {
    const currentUser = this.users.find((user) => user.userId === userId);
    const userPhonesArray = currentUser?.phoneNumbers || [];

    if (userPhonesArray.length === 0) {
      return this.sanitizer.bypassSecurityTrustHtml('');
    }

    // 拼接HTML格式内容，包含换行和箭头实体
    const phoneHtml = userPhonesArray.map(phone => `&rarr; ${phone}<br>`).join('');
    const fullHtml = `${user.name}<br>${phoneHtml}`;
    return this.sanitizer.bypassSecurityTrustHtml(fullHtml);
  }
}

步骤2：HTML绑定及样式调整 #

<div *ngFor="let user of users"
     [matTooltip]="getUserPhones(user.userId)"
     matTooltipClass="html-tooltip">
  <!-- 用户列表内容 -->
</div>

添加CSS确保HTML换行生效：

.html-tooltip {
  white-space: pre-line;
}

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