使用 Renderer2 向元素添加指令

Question

我有一個指令，當您懸停元素時實現滑塊，如果您在懸停圖像時訪問此站點，該指令使其他圖像絕對為主圖像並啟用箭頭以滑動到下一個圖像，唯一的問題是我有一個 appLazyLoadWithLoading 指令，當圖像在頁面中可見且不在屏幕外時加載圖像，並在加載之前添加加載，我正在尋找一種將指令添加到創建的 img 元素的方法。

let img = this.renderer2.createElement('img');
this.renderer2.setAttribute(img, "src", this.thumbnailMaker(element.url));
this.renderer2.setAttribute(img, "alt", element.name);
this.renderer2.setAttribute(img, "title", element.name);
this.renderer2.appendChild(this.el.nativeElement.parentElement, img);

通過這種方式添加了 img 元素，但我無法將我的指令添加到它嘗試這種方式和 $compile 並且它們沒有工作。

this.renderer.setAttribute(img, "appLazyLoadWithLoading", "work please!");

Answer 1

可以不使用Renderer2而是使用動態組件加載。

基本上，不是創建一個img html 元素，而是創建一個包含img元素的組件，其中包含您想要的任何指令，然后動態加載該組件。

這是一個示例StackBlitz

Answer 2

在 Angular v12 之前，您不能在 DOM 中動態添加組件。

一個解決方案可以是，

1. 使用選擇器[appLazyLoadWithLoading]創建組件
2. 將此組件轉換為 Angular Elements。
3. 現在您可以動態使用轉換后的組件。

基本上發生的事情是 Angular Element 幫助將您的組件轉換為 Web 組件。 因此，當您將特定選擇器添加到 DOM 時，特定的 Web 組件將啟動，您將在 HTML 上看到所需的行為。