Question

您好，在我的angular（6）应用程序中，我正在使用一个图表库，该图表库在初始化组件后生成图表及其html。

当我将鼠标悬停在某个div上时，我想添加事件（特别是悬停事件）。我通常只使用内置的(mouseover)角形，但是由于html是由库生成的，因此我无权使用html添加这些内容。

关于在生成html之后如何添加这些事件的任何建议？

谢谢！

Answer 1

由于您无权访问动态生成的HTML，因此您有两种选择：

分叉库的代码并添加事件侦听器。然后在您的应用程序中使用分叉的代码。我会针对此建议强烈。您将需要维护另一个库，这可能会导致很多错误和很多开销
将事件侦听器直接添加到生成的HTML元素中。这将是一种更直接的解决方案，而没有太多开销。

因此请在2上展开。

您将需要使用来自Renderer2的角度监听，这在文档here和本answer中都有详细说明。排序时，您需要创建以下内容：

let global = this.renderer.listen('document', 'click', (evt) => {
  console.log('Clicking the document', evt);
})

let simple = this.renderer.listen(this.myButton.nativeElement, 'click', (evt) => {
  console.log('Clicking the button', evt);
});

还请记住，该元素应该已经渲染才能正常工作，因此您需要将此代码放置在ngAfterViewInit（）lifecycle hook内或设置超时（不建议使用-您不要还要调试比赛条件。

请注意，也请参阅链接问题的plunker，以查看完整的实现。

将事件绑定到Angular中动态创建的HTML

1 个答案: