Как использовать переменную из другого компонента, содержащего всплывающие подсказки HTML и AngularMaterial?
В моем проекте Angular (новейшая версия) я хочу отображать текст, содержащий всплывающую подсказку, когда вы наводите на него курсор. Для этого я использую Angular Material. Для возможной всплывающей подсказки существует несколько вариантов, поэтому мне нужна строковая переменная, содержащая дополнительный HTML-код и всплывающую подсказку. Хотя дополнительный HTML-код работает с [innerHTML] = "variable", всплывающая подсказка — нет. Почему это и как я могу это исправить?
В компоненте 1 я получил: <div [innerHTML] = "variable"></div>
В компоненте 2 я получил: let variable = '<span matTooltip = "TooltipText"><b>Text</b></span>'
Я ожидаю, что всплывающая подсказка и жирный текст будут работать, но применяется только жирный текст, а всплывающей подсказки нет. Однако когда я не использую переменную, а просто ввожу содержимое переменной напрямую, все работает. Кажется, я просто не могу применить всплывающую подсказку через переменную.
Подсказки материалов не предназначены для отображения обширной информации. m2.material.io/comComponents/tooltips#placement
@Razzer Нет, я это пробовал вначале, но потом он просто показывает весь синтаксис HTML, а не только текст с дополнительными функциями.
@JSONDerulo Я не понимаю, что это значит. Я могу использовать всплывающую подсказку, если использую ее напрямую, я просто хочу, чтобы она работала с переменной.
Подсказка материала может быть только строкой. Никакая расширенная информация (пользовательская разметка) не поддерживается. Это техническое ограничение Angular Material. Вы можете создать запрос на добавление функции, но вряд ли он будет реализован, так как это прямо противоречит рекомендациям Material Design.
@JSONDerulo Но тогда я смогу удалить <b></b>, и это должно сработать, не так ли? Но это не так. Есть ли у вас рекомендации по обходному пути для меня? Я новичок во всем этом и просто хочу иметь несколько возможных подсказок для разных текстов. Например, когда мой объект имеет должность «Техник», всплывающая подсказка должна содержать информацию о том, чем занимается техник. Если у другого объекта есть задание «Учитель», у него должна быть подсказка, объясняющая, что делает учитель.
Ах, теперь я вижу. innerHTML не будет отображать компоненты или директивы Angular. Он просто принимает строковый ввод и отображает HTML напрямую, без обработки Angular. Вот почему вы не видите всплывающую подсказку.
Этот вопрос похож на: Загрузите компонент через внутренний HTML в angular5. Если вы считаете, что это другое, отредактируйте вопрос, поясните, чем он отличается и/или как ответы на этот вопрос не помогают решить вашу проблему.
@JSONDerulo Спасибо за это объяснение. Итак, есть ли альтернатива «innerHTML»? Двойные фигурные скобки не работают. Я не могу себе представить, что нет обходного пути для создания разных всплывающих подсказок в зависимости от переменной.
Ответы 1
Проблема, с которой вы сейчас столкнулись, интересна. Прежде чем углубиться в ответ, давайте поймем основную причину проблемы.
Понимание основной причины проблемы Проблема, с которой вы столкнулись, связана с тем, что когда переменная передается в внутренний HTML, она добавляется к элементу div во время выполнения, после создания сборки и во время рендеринга компонента. Выходные данные сборки Angular представляют собой пакет JavaScript, и при выполнении внутреннего HTML логика Angular дает сбой, поскольку браузер может понимать только HTML, JS и CSS. В частности, атрибут MatTooltip, который является особенностью Angular, не может интерпретироваться браузером, что приводит к потере его функциональности.
Решение Чтобы обойти это ограничение, важно разделить всплывающую подсказку и внутренний HTML. Вместо этого попробуйте следующий подход:
toolTip = "TooltipText"
variable = "<b>Text</b>"
<div [matTooltip] = "toolTip" [innerHTML] = "variable">
Спасибо. Но можете ли вы объяснить новичку вроде меня, как мне снова объединить всплывающую подсказку и переменную? Потому что я хочу, чтобы у конкретной переменной была определенная подсказка. Итак, если переменная — «Учитель», я хочу, чтобы всплывающая подсказка содержала объяснение профессии учителя. И мне кажется трудным, если я разделю их таким образом.
Вы можете создать объект, который будет содержать и всплывающую подсказку, и внутренний HTML. Например. : teacher = {tooltip: "teacherTooltip", innerHtml: "<b>Teacher</b>"}<div [matTooltip] = "teacher.toolTip" [innerHTML] = "teacher.innerHTML">
Это все для меня решило. Спасибо большое, очень доступно и доходчиво объяснили.
Может быть, попробуйте это:
<div> {{ variable }} </div>