angular - Angular 9 - 在注入的 HTML 鼠标悬停时打开浮动组件

Question

我有一些从数据库中作为字符串加载的文本。此文本包含 HTML 标签。其中有像这样的标签

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

我将文本放在页面上，如下所示：

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

我想要什么： - 当鼠标进入时：显示一个悬停容器，该容器显示一个使用链接选择器的 href 的组件 - 当鼠标离开时：隐藏悬停容器 - 这实际上是维基百科必须显示预览的相同功能文章

我不能使用指令，因为如果像这样注入 html，它不会激活。

我该怎么办？

标签： angular

Answer 1

您可以尝试在外部 div 中添加鼠标悬停事件并显示第二部分

HTML

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

打字稿

displayMe = false;

showText() {
 displayMe = true;
}