將事件綁定到 Angular 中動態創建的 html

Question

在我的 angular (6) 應用程序中，我使用了一個圖表庫，該庫在組件初始化后生成圖表及其 html。

我想在懸停在某個 div 上時添加事件（特別是懸停事件）。 我通常只會使用內置的 angular (mouseover)但由於 html 是由庫生成的，因此我無法訪問 html 來添加這些內容。

生成html后如何添加這些事件？

Answer 1

由於您無權訪問動態生成的 HTML，因此您有兩種選擇：

1. Fork 庫的代碼並添加事件偵聽器。 然后在您的應用程序中使用分叉代碼。 我強烈建議不要這樣做。 您需要維護另一個庫，這可能會導致很多錯誤和大量開銷
2. 直接向生成的 HTML 元素添加事件偵聽器。 這將是一個更直接的解決方案，沒有太多開銷。

所以在 2. 上擴展：

您需要使用來自 Angular 的 Renderer2 偵聽，這在此處的文檔和此答案中也有詳細說明。 排序你需要創建這樣的東西：

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()生命周期鈎子內或設置超時（不建議 - 您不想調試比賽條件）。

請注意，另請參閱鏈接問題的plunker以查看完整實現。