使用 Renderer2 向元素添加指令

Question

我有一个指令，当您将鼠标悬停在元素上时，它会实现一个滑块，如果您在将鼠标悬停在图像上时访问此 site，该指令会使其他图像绝对为主图像，并启用滑动到下一个的箭头图像，唯一的问题是我有一个 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，而是使用 dynamic component loading。

基本上，不是创建 img html 元素，而是创建一个组件，其中包含一个 img 元素，使用您想要的任何指令，然后动态加载该组件.

这是一个例子StackBlitz

Answer 2

在 Angular v12 之前，您无法在 DOM 中动态添加组件。

一个解决方案可以，

使用选择器创建组件 [appLazyLoadWithLoading]
将此组件转换为 Angular 个元素。
现在您可以动态使用转换后的组件了。

基本上发生的事情是 Angular 元素帮助将您的组件转换为 Web 组件。因此，当您将特定选择器添加到 DOM 时，特定的 Web 组件将启动，您将在 HTML.

上看到所需的行为

使用 Renderer2 向元素添加指令

Adding directive to an element using Renderer2

angular

angular-directive

angular-renderer2