Angular 2 Material工具提示，带有角度的HTML内容答案

【问题标题】：Angular 2 Material tooltip with HTML content in angularAngular 2 Material工具提示，带有角度的HTML内容
【发布时间】：2017-10-25 22:38:42
【问题描述】：

我正在尝试将 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;}

提前致谢。

【问题讨论】：

标签： javascript html angular

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

它没有经过很好的测试，但我通过在 TooltipComponent(app.component.ts) 上为“消息”属性定义 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>`;

结果

【讨论】：

【解决方案4】：

您正在寻找的是弹出框。如前所述，它现在不存在，也无法使用工具提示。

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

在设计工具提示时，我们故意决定不支持这。 Material Design 规范只对文本进行了规定出现在工具提示中。丰富的内容也对 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 库)

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

【讨论】：

【解决方案5】：

我相信你想要的是 CDK Overlay：

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

那里有一些例子。

【讨论】：