Angular 2 材料工具提示 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

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

Answer 2

它没有经过很好的测试，但我通过在 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 3

我做到了，很完美

html文件：

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

ts文件：

   getStringFromHtml(text){
      const html = text;
      const div = document.createElement('div');
      div.innerHTML = html;
      return div.textContent || div.innerText || '';
}

Answer 4

Material 与 bootstrap 不同，它没有像 popover 这样的东西（它的工具提示只是文本，没有 HTML）。 我认为根据此用例的指南，您应该改用对话框。

Answer 5

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

Angular 成员团队@jelbourn 的回答：

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

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

您可以在此处找到 popover 的功能请求。

在 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库）

---

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

Answer 6

我相信你想要的是 CDK Overlay：

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

那里有一些例子。

Answer 7

如何通过开玩笑测试？

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

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