为什么动态添加 Angular matTooltip 不起作用？答案

【问题标题】：Why doesn't Angular matTooltip work when you add it dynamically?为什么动态添加 Angular matTooltip 不起作用？
【发布时间】：2019-10-07 21:39:24
【问题描述】：

我有一个 SVG 元素，我想在 Angular 中的某个位置添加一个 matTooltip。我观察到，如果我尝试像这样添加 matTooltip：

generate() {
  var svgEle = document.getElementById("testSVG");
  var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  rect.setAttribute('id', "rect");
  rect.setAttribute('x', "73");
  rect.setAttribute('y', "95");
  rect.setAttribute('class', "st01");
  rect.setAttribute('width', "407");
  rect.setAttribute('height', "328");
  rect.setAttribute('matTooltip', "Info about the action");
  svgEle.append(rect)
}

使用html测试代码：

<div style="width:400px">
    <svg version="1.1" id="testSVG" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" 
    xml:space="preserve">
    <style type="text/css">
          .st01{fill:#F99191;}
          .st11{fill:#92B1F7;}
    </style>
    <rect x="638.5" y="146" class="st11" width="236" height="219" 
    matTooltip="Info about the action"/>
    </svg> 
</div>
<button mat-stroked-button (click)="generate()">Generate</button>

它不起作用。

这种情况到底是什么问题？

【问题讨论】：

您能否提供有关 stackblitz 的完整示例？
我不确定如何将它与 Angular 材料一起使用
使用可以使用这个模板：stackblitz.com/edit/angular-mat-tooltip
title 属性是否适用于此？你真的需要matTooltip吗？
标题有点慢，想加点样式

标签： angular svg angular-material tooltip

【解决方案1】：

它不起作用，因为 TS 中的 Angular 是一种编译语言。

这意味着[matTooltip] 可能对 TS 编译器有意义，但对 JS 来说是值得的。

Angular 不依赖元素属性来显示工具提示。相反（如果我没记错的话），它使用动态组件渲染来提供绝对定位的丰富组件。

如果您像这样附加工具提示，则与什么都不做一样。

【讨论】：

通过将其添加到您的模板中。因为，你似乎不知道，在 Angular 中自己操作 DOM 是一种非常糟糕的做法。
问题是我动态生成 svg 所以我不能这样做
鉴于 SVG，您绝对可以做到。
这只是一个例子。 SVG 最初是空白的，我根据 generate() 函数中的一些数据在 onInit 上生成它。或者也许我并不完全理解你在模板中添加它的意思。
我的意思是您在 *.html 文件中使用，也就是模板。至于 SVG，您可以创建一个 SVG 占位符并将工具提示附加到它。您还可以使用库来保留 Angular 上下文并绘制 SVG（我记得大约一年前使用过 SnapSVG）。

【解决方案2】：

您的里程可能会有所不同，但这是我为克服这一点所做的。为页面创建一个工具提示，并在您滚动到某个对象时重新定位它。

在您的 html 文件中

<div #tooltip="matTooltip" matTooltip={{tooltipMessage}}></div>

在您的 .ts 文件中

import {MatTooltip} from '@angular/material';
...

@ViewChild('tooltip') tooltip: MatTooltip;
tooltipMessage: string = '';


.on('mouseover', function(d: Location, event: MouseEvent){


    me.tooltipMessage = "My tooltip message."
    me.tooltip.disabled = false;
    me.tooltip.show();

    let tip = me.tooltip._overlayRef.overlayElement;
    if(tip){
       setTimeout(()=>{
          tip.style.left = d.x+"px";
          tip.style.top = y+"px";
       })
     }

})
.on('mouseout', function(d: Location, event: MouseEvent){
     me.tooltip.hide();

})

【讨论】：