Почему Angular matTooltip не работает, когда вы добавляете его динамически? - PullRequest
Новая
       12

Почему Angular matTooltip не работает, когда вы добавляете его динамически?

1 голос
/ 21 мая 2019

У меня есть элемент SVG, и я хочу добавить matTooltip в какой-то момент в Angular.Я заметил, что если я попытаюсь добавить 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>

, это не сработает.

Что именнопроблема в этой ситуации?

1 Ответ

1 голос
/ 21 мая 2019

Это не работает, потому что Angular в TS - это скомпилированный язык.

Это означает, что [matTooltip] может что-то значить для компилятора TS, но это стоит sh * t для JS.

Angular не использует атрибуты элемента для отображения всплывающей подсказки. Вместо этого (если я не ошибаюсь), он использует динамический рендеринг компонентов, чтобы обеспечить богатый компонент, который абсолютно позиционирован.

Если вы добавите всплывающую подсказку, как это, это то же самое, что ничего не делать.

...