我们如何以角度向 DOM 元素（来自 ts 文件）注入属性指令答案

【问题标题】：How can we inject a attribute directive to the DOM element ( from ts file ) in angular我们如何以角度向 DOM 元素（来自 ts 文件）注入属性指令
【发布时间】：2021-08-29 08:03:09
【问题描述】：

是否可以使用 setAttribute() 向 DOM 元素添加指令？

我试图通过材料拖放在我的组件中实现拖放。它正在工作，当我这样尝试时

<div class="example-boundary">
<div class="example-box" #test cdkDragBoundary=".example-boundary" cdkDrag>
    I can only be dragged within the dotted container
</div>

据我了解，拖动功能通过 cdkDrag 属性指令工作。

当我尝试通过 setAttribute() 添加此指令时，它不起作用

constructor(private _renderer: Renderer2, private _elRef: ElementRef) {}

ngAfterViewInit(): void {
   let requiredElem = this._elRef.nativeElement.querySelectorAll('.example-box');
   this._renderer.setAttribute(requiredElem[0], 'cdkDrag', '');
}

当我检查 DOM 时，似乎添加了 cdkDrag。

有人帮我解决这个问题吗？提前致谢。

编辑

我已经使用 jquery (https://stackblitz.com/edit/angular-ivy-syoi3w?file=src/app/iframe/iframe.component.ts) 在 iframe 元素中实现了拖动功能，这个 slackBlitz 示例面临 jqueryUi lib 的问题。

【问题讨论】：

你不能这样做，因为 directive 应该在 template 内，由 Angular 初始化。但是为什么不直接把它添加到模板中使用呢？
我有这样的要求，在 iframe 的元素中实现拖放功能。所以我想，从 iframe 中选择所需的 dom 元素并添加此指令。
iframe 是由父页面加载的完全不同的页面（子 dom），并且 Angular 将无法控制它，除非 iframe src 也是一个 Angular 应用程序，在这种情况下它是一个不同的实例。跨度>
@JpVinjamoori 所以我们不能这样做吗？你有什么其他建议可以完全满足这个要求吗？我已经使用 jquery draggable() 实现了这个。我想避免使用jquery
检查cdkDrag source code，看看您是否可以使用那里使用的相同功能进行任何解决方法或自定义实现。

标签： javascript angular angular-material drag-and-drop dom-manipulation

【解决方案1】：

简单的答案是否定的，你不能在 Angular 中做到这一点。通过使用 $compile 服务，您可以在旧的 angular.js 中寻找什么。例如：

element.setAttribute('cdkDrag', '');
$compile(element)($scope);

但是，出于许多充分的理由，Angular 团队决定在新框架中放弃对这种动态方法的支持。

在 Angular 的前几个 RC 版本中，有一些基于 DynamicComponentLoader 的变通方法/hacks 可以实现对 DOM 元素的动态指令编译，但后来 DynamicComponentLoader 也被弃用并被删除。

【讨论】：