Среда выполнения шаблона компиляции Angular 6
Я работаю с библиотекой Angular 6 и D3 (помогает с манипуляциями с DOM), и я добавляю несколько тегов html во время выполнения с атрибутами материала angular (matTooltip).
Если у меня сначала создается какая-то структура, всплывающая подсказка работает отлично, но если я добавляю ту же структуру в реальном времени, она не работает.
Я предполагаю, что это связано с процессом компиляции с angular, и мне было интересно, есть ли способ решить эту проблему.
Я создал базовый пример, на котором вы можете увидеть то, что я объяснил. В app.component.html есть тег g с всплывающей подсказкой, который отлично работает. В app.component.ts я добавил тот же тег во время выполнения, но не добавил.
Ответы 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, ничего не происходит.
Если вы хотите решить эту проблему, вы можете взглянуть на как работает директива (приготовьтесь к трудностям) или вы можете попробовать использовать первое использованное вами решение, которое, на мой взгляд, является самым простым.
Поместите атрибут в свой шаблон, где он должен быть, а не в логику вашего компонента.
Проблема в том, что мне нужно создать его во время выполнения в реальном приложении из-за некоторой логики, необходимой в компоненте.
Затем вам нужно будет создать для этого свою собственную всплывающую подсказку, потому что вы не можете использовать всплывающую подсказку материала после компиляции.
Я понял проблему, спасибо за объяснение, но я не знаю, что вы имеете в виду, говоря о решении, которое я мог бы принять. Вы можете объяснить?