我如何使用 Angular2 向 $event.target 添加新的 html 元素？答案

【问题标题】：How i cat to add new html element to $event.target with Angular2?我如何使用 Angular2 向 $event.target 添加新的 html 元素？
【发布时间】：2018-07-03 22:16:19
【问题描述】：

我有一个包含元素列表的页面。如果鼠标悬停在元素上，我想在每个元素附近显示“复制”按钮。现在我可以通过这种方法在元素中创建“复制”按钮：

  mouseovered(event) {
    if (event.target.classList.contains('element')) {
      event.target.insertAdjacentHTML('beforeend',
        '<button class="copy-button"></button>');
    }
  }

mouseovered($event) - 是列表中的一个事件

但是我不知道当鼠标离开时如何删除这个按钮。而且，它的工作速度有多快？

【问题讨论】：

您应该将视图和模型分开。如果您的视图需要有一个复制按钮，请添加它并在需要时显示它，而不是从您的视图中动态添加和删除内容。
@Fallenreaper，需要动态添加，因为列表可能很长。
这听起来像是您的 ngFor 循环的问题。听起来您需要分页来限制给定时间点可见记录的范围，不是吗？一个用户不能一次理解 5000 个项目......所以没有必要全部渲染它们。还可以通过滚动分页来根据需要多渲染 20 个和 20 个，或者一次渲染 5000 个项目以外的其他概念，从而节省资源。
@Fallenreaper，是的，这是真的。但我想保留通过 ctrl+f、浏览器热键搜索元素的能力。
因为使用操作系统快捷方式而浏览机器资源并不是正确的答案，尤其是使用 Web 实用程序的操作系统快捷方式。您可以轻松实现实现 ctrl+f 功能的搜索栏，并具有更好的资源管理。我的意思是，我不是告诉你该怎么做，而是给出一个建议来改善你的机器资源的使用。

标签： javascript html angular typescript

【解决方案1】：

您可以为每个元素添加一个 id，并在组件内声明一个公共属性。这样，您可以生成一堆按钮，并仅在焦点或悬停时显示它们。

这是一个示例，其中您的元素位于列表元素中。

&lt;li&gt; &lt;button id="1" class="copy-button" [class.hidden]='isFocused!=this.id' (focus)="focusedId = this.id" (blur)="focusedId = null"&gt; &lt;/button&gt;&lt;/li&gt;

【讨论】：

列表中有超过 5000 个元素。而且我不想创建 5000 个按钮来一次只显示一个
在这种情况下，您可以检测到模糊（或悬停丢失），然后删除您的按钮。假设你给你的按钮一个固定的 id，你可以这样做：let btnToRemove = document.getElementById('#copy-btn') 然后删除 if btnToRemove.parentNode.removeChild(btnToRemove)