0
518
Vistas¿Cómo podemos inyectar una directiva de atributo al elemento DOM (del archivo ts) en angular?
¿Es posible agregar una directiva al elemento DOM usando setAttribute()?
Estaba tratando de implementar arrastrar y soltar en mi componente con arrastrar y soltar material. está funcionando, cuando lo intenté así
<div class="example-boundary"> <div class="example-box" #test cdkDragBoundary=".example-boundary" cdkDrag> I can only be dragged within the dotted container </div>según tengo entendido, la funcionalidad de arrastre funciona a través de la directiva de atributo cdkDrag .
Cuando traté de agregar esta directiva a través de setAttribute(), que no funciona
constructor(private _renderer: Renderer2, private _elRef: ElementRef) {} ngAfterViewInit(): void { let requiredElem = this._elRef.nativeElement.querySelectorAll('.example-box'); this._renderer.setAttribute(requiredElem[0], 'cdkDrag', ''); } Cuando compruebo el DOM, parece que se agrega cdkDrag. 
¿Alguien que me ayude a resolver esto? gracias de antemano.
Editar
Implementé esa funcionalidad de arrastre en el elemento iframe usando jquery ( https://stackblitz.com/edit/angular-ivy-syoi3w?file=src/app/iframe/iframe.component.ts ) este ejemplo de slackBlitz enfrenta un problema con jqueryUi liberación
1 Respuestas
Responde la pregunta0
La respuesta simple es no, no puedes hacer esto en Angular. Lo que está buscando era posible en el antiguo angular.js, mediante el uso del servicio $compile . Por ejemplo:
element.setAttribute('cdkDrag', ''); $compile(element)($scope);Pero, por varias buenas razones, el equipo de Angular decidió dejar de admitir enfoques tan dinámicos en el nuevo marco.
En las primeras versiones RC de Angular, hubo algunas soluciones/trucos basados en DynamicComponentLoader que permitirían lograr una compilación de directivas dinámicas en elementos DOM, pero más tarde DynamicComponentLoader también quedó en desuso y luego se eliminó.