使用 Renderer2

编程问答 2022-07-08

问题描述

我有一个指令，当你悬停元素时实现一个滑块，如果你在悬停图像时访问这个 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!");

解决方法

可以不使用 Renderer2，而是使用 dynamic component loading。

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

这是一个例子StackBlitz

,

在 Angular v12 之前，你不能在 DOM 中动态添加组件。

一个解决方案可以，

  1. 创建一个带有选择器 [appLazyLoadWithLoading] 的组件
  2. 将此组件转换为 Angular Elements。
  3. 现在您可以动态使用转换后的组件。

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

angularangularangular-directiveangular-renderer2