Javascript 有没有办法让工具提示通过innerHTML工作？

我使用属性

innerHTML

编辑标记的内部html，在本例中是

，但它可以是任何内容：

<td *matCellDef="let order" mat-cell [innerHTML]="order.statusForInterval | statusIcon"></td>

因此，根据数字，我返回一个包含

img

标记的字符串，该标记随后绑定到innerHTML。 一切正常。我唯一的问题是，当我使用

innerHTML

属性时，工具提示不起作用。如果以这种方式设置innerHTML，则会忽略属性

matTooltip=“Open”

---

有没有办法让工具提示使用

innerHTML

？

除非你真的知道自己在做什么，否则要不惜一切代价避免innerHTML，因为它很快会导致XSS漏洞，即使你的直接字段不会导致可见的XSS漏洞。通过简单的检查，几乎肯定有更好的方法来实现这一点，但是如果没有实际的代码，很难知道。我建议采取以下措施：

<td *matCellDef="let order" mat-cell>{someValue ? someValue : someOtherValue}</td>

{someValue？someValue:someOtherValue}

或者把它分离成一个函数

<td *matCellDef="let order" mat-cell>{MyComponent(order.statusForInterval)}</td>

{MyComponent（order.statusForInterval）}

我建议您使用两根管道。一个用于图像src，另一个用于matToolTip。差不多

    <td mat-cell *matCellDef="let element">
      <img
        class="status-icon"
        [src]="element.position | tdImgSrc"
        alt="up"
        [matTooltip]="element.position | tdMatTooltip"
      />
      {{element.position}}
    </td>

用于MatToolTip的管道

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "tdMatTooltip"
})
export class TdMatTooltipPipe implements PipeTransform {
  transform(statusId: number): string {
    switch (statusId % 5) {
      case 0:
        return "Open";
      case 1:
        return "Progress";
      case 2:
        return "Checked";
      case 3:
        return "Booked";
      case 4:
        return "Error";
    }
  }
}

这种分解的优点是代码易于阅读和维护，因为每个管道都有一个单独的职责

---

您可以在这里看到stackblitz上的代码->

为什么要更新

td

，而不是在模板中使用该类的

img

元素并设置其值？另外，不要对所有四个图像都使用

alt=“up”

：alt属性用于描述图像所代表的内容，以便辅助工具可以向部分或无视觉的用户描述图像。您可以查看此内容，并在

中添加一个

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "tdImgSrc"
})
export class TdImgSrcPipe implements PipeTransform {
  transform(statusId: number): string {
    switch (statusId % 3) {
      case 0:
        return `https://img-authors.flaticon.com/freepik.jpg`;
      case 1:
        return `https://www.flaticon.com/svg/vstatic/svg/68/68858.svg?token=exp=1616188223~hmac=6ef8123fc9aa7d33aaeddbe4dea787b6`;
      case 2:
        return `https://www.flaticon.com/svg/vstatic/svg/68/68792.svg?token=exp=1616188228~hmac=36273c59084428c6005d1f361cfb27f7`;
      // case 3:
      //   return `assets/svg/status-icon/open_icon.svg`;
      // case 4:
      //   return `assets/svg/status-icon/open_icon.svg`;
    }
  }
}

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "tdMatTooltip"
})
export class TdMatTooltipPipe implements PipeTransform {
  transform(statusId: number): string {
    switch (statusId % 5) {
      case 0:
        return "Open";
      case 1:
        return "Progress";
      case 2:
        return "Checked";
      case 3:
        return "Booked";
      case 4:
        return "Error";
    }
  }
}