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

对我们来说是坏消息：角度材料工具提示不支持HTML，目前，他们没有意图支持它。 Here更多信息。

Answer 2

它没有经过很好的测试，但是我通过在TooltipComponent（app.component.ts）上为“消息”属性定义了setter来做到这一点

max(mylist, 0) => [1, 5, 0, 7]

html

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

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

ts

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

结果

Answer 3

我这样做了，很正常

html文件：

Iterator

ts文件：

<span class="icon-status" [matTooltip]="getStringFromHtml(value.status)"></span>

Answer 4

与引导程序相比，材料没有弹出窗口之类的东西（它的工具提示只是文本，没有HTML）。我认为，根据该用例的指南，您应该改用对话框。

Answer 5

您要寻找的是 Popover 。如前所述，它现在不存在，并且无法使用工具提示。

Angular成员团队 @jelbourn 的答案：

在设计工具提示时，我们故意决定不支持这个。材料设计规范仅对文字有规定出现在工具提示中。丰富的内容也带来了挑战 a11y。

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

您可以找到弹出框here的功能请求。

在从Material团队正式发布之前，您可以使用其他方法。以下是一些示例：

https://github.com/joejordanbrown/popover（文档here）
https://github.com/ncstate-sat/popover
https://github.com/maxisam/ngx-mat-popover（使用“材料”菜单）
https://ng.ant.design/components/popover/en（ng-zorro lib）

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

Answer 6

我相信你想要的是 CDK Overlay：

https://material.angular.io/cdk/overlay/overview

那里有一些例子。

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

6 个答案: