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;
       }
   },
});