Angular 9 - Открыть плавающий компонент при наведении курсора мыши на HTML

Question

У меня есть текст, который загружается в виде строки из базы данных. Этот текст содержит HTML тегов. Среди них есть такие теги, как

<a href="link-to-somewhere"></a>

Я размещаю текст на странице примерно так:

<div [innerHtml]="text"></div> 

Что я хочу: - Когда мышь входит: Показать контейнер для наведения, который отображает компонент, который использует ссылку селектора ссылок - когда мышь уходит: скрыть контейнер для наведения - это практически та же функция, что и в Википедии для предварительного просмотра статьи

Я не могу использовать директиву, потому что она не активируется, если html вводится таким образом.

Как бы я go об этом?

Answer 1

Вы можете попробовать добавить событие наведения мыши во внешнем элементе div, чтобы вторая часть показала

HTML

<div (mouseover)="showText()">
<div [innerHtml]="text" *ngIf="displayMe"></div>
</div>

Машинопись

displayMe = false;

showText() {
 displayMe = true;
}