Angular 2 Material工具提示，其中的HTML内容为angular

Question

我正在尝试将HTML字符串绑定到angular 2工具提示中。但是它以HTML形式呈现为纯字符串。有什么方法可以将字符串呈现为HTML。

这是我的代码：

在视图中：

 <span class="icon-status" mdTooltip="{{value.status}}"></span>

零件：

value.status = this.sanitizer.bypassSecurityTrustHtml(this.getStatusTemplate(value.status));


  getStatusTemplate(status: IIconStatus): string{
let HTML =`
  <div>Event Title</div>
  <div class="">
    <table>
      <thead>
        <th>User</th>
        <th>User</th>
        <th>User</th>
        <th>User</th>
      </thead>
    </table>
  </div>
`;
return HTML;}

提前致谢。

Answer 1

它没有经过充分测试，但我通过在 TooltipComponent(app.component.ts) 上为“message”属性定义 setter 来做到这一点

Object.defineProperty(TooltipComponent.prototype, 'message', {
   set(v: any) {
       const el = document.querySelectorAll('.mat-tooltip');

       if (el) {
           el[el.length - 1].innerHTML = v;
       }
   },
});

html

<div [matTooltipClass]="'right'"
     [matTooltip]="aboveTemplate"
     matTooltipPosition="right">
    Right
</div>

ts

aboveTemplate = `<div class="color-red">Top Template<button style="background: white; color: black">Press me</button></div>`;

结果

Answer 2

对我们来说是个坏消息：角度材料工具提示中不支持HTML，目前，他们无意支持它。这里更多信息。

Answer 3

您正在寻找的是Popover。如前所述，它现在不存在，并且使用工具提示也是不可能的。

来自Angular 成员团队@jelbourn的回答：

在设计工具提示时，我们特意决定不支持这一点。Material Design 规范对于仅出现在工具提示中的文本有相当多的规定。丰富的内容也给a11y带来了挑战。

来源：https ://github.com/angular/components/issues/5440#issuecomment-313740211

您可以在此处找到弹出窗口的功能请求。

在 Material 团队正式发布之前，您可以使用替代方案。这里有些例子：

• https://github.com/joejordanbrown/popover（文档在这里）
• https://github.com/ncstate-sat/popover
• https://github.com/maxisam/ngx-mat-popover（使用材质菜单）
• https://ng.ant.design/components/popover/en（ng-zorro库）

编辑：如果您需要对整个工具提示进行简单的自定义（更改背景颜色、颜色、字体大小...），您可以阅读这篇文章。