2

我有一个指令，当您悬停元素时实现滑块，如果您在悬停图像时访问此站点，该指令使其他图像绝对为主图像并启用箭头以滑动到下一个图像，唯一的问题是我有一个 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!");
4

2 回答 2

1

可以不使用Renderer2但使用动态组件加载。

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

这是一个示例StackBlitz

于 2021-07-31T18:52:14.360 回答
1

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

一个解决方案可以是，

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

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

于 2021-08-01T09:01:12.570 回答