Angular 6 компиляция шаблона времени выполнения

Question

Я работаю с Angular 6 и библиотекой D3 (помогает вам с манипуляциями с DOM), и я добавляю html-теги во время выполнения с атрибутиками угловых материалов (matTooltip).

Если у меня сначала есть какая-то структура,подсказка работает отлично, но если я добавляю ту же структуру в реальном времени, она не работает.

Я думаю, это связано с процессом компиляции с angular, и мне было интересно, если есть способ решить эту проблему.

Я создал базовый пример, где вы можете увидеть, что я объяснил.В app.component.html есть тег ag с всплывающей подсказкой, которая отлично работает.В app.component.ts я добавил тот же тег во время выполнения и не сделал.

https://stackblitz.com/edit/angular-q7ctyq

Answer 1

Не работает, потому что первый случай сделан до компиляции , а второй - после компиляции .

Чтобы сформулировать это более понятным образом:

когда пишешь

<g id="tick1" matTooltip="200">

При компиляции Angular читает этот тег и понимает, что он должен отображать подсказку через директиву.

Таким образом, он заменит этот атрибут matTooltip чем-то вроде data-mat-tooltip="200" и будет использовать его в таблице стилей для отображения всплывающей подсказки, что-то вроде

g[data-mat-tooltip]:after {
  content: attr(data-mat-tooltip);
  // Styles & animations
}

С другой стороны, когда вы создаете код в логике вашего компонента, ваш код компилируется, и после компиляции добавляется атрибут .

matTooltip не является атрибутом HTML, ничего не происходит.

Если вы хотите решить эту проблему, вы можете взглянуть на , как работает директива (готовьтесь к трудностям), или вы можете попробовать использовать первое решение, которое вы использовали, которое в На мой взгляд, самый простой.