使用 Renderer2 向元素添加指令答案

【问题标题】：Adding directive to an element using Renderer2使用 Renderer2 向元素添加指令
【发布时间】：2021-10-06 15:20:44
【问题描述】：

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

【问题讨论】：

您不能在 DOM 之上动态添加指令，目前这是不可能的。一种可能的解决方案是，使用选择器 [appLazyLoadWithLoading] 创建一个组件并将其转换为 Angular Elements。因此，一旦您将其添加到 DOM，使用 Angular Element 创建的特定 Web 组件就会启动。我没有尝试过，但我相信这应该可以工作
@PankajParkar 所以没有办法做到这一点？也许在 HTML 中编写 Img 标记，然后使用 Renderer2 将其添加到父元素？
你能看看我上次编辑的评论吗？我建议了一种解决方案，应该可行。
@PankajParkar 谢谢，我要试一试并在这里报告结果
太棒了，告诉我进展如何，谢谢:)

标签： angular angular-directive angular-renderer2

【解决方案1】：

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

解决办法可以，

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

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

【讨论】：

可以添加组件，但不能添加指令。
间接你可以使用template: '' 的组件（指令是没有模板的组件），但为了避免混淆，让我将其仅保留为组件。感谢@AviadP 的提醒。
我的意思是你可以动态添加组件，看看我的回答和stackblitz——除非我误解了你的意思
@AviadP。是的，我看到了你的回答。我们可以在multiple ways 中动态添加组件。我认为你误解了，在这种情况下，OP 想要在 DOM 之上添加一些东西，它本身以编程方式动态创建，在这种情况下，这是不可能的。我可以看到 Angular Elements 是解决这个问题的方法。
我不明白为什么使用组件工厂添加组件对 OP 不起作用

【解决方案2】：

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

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

这是一个例子StackBlitz

【讨论】：