He agregado un script externo a un componente así:
ngAfterViewInit() { let s = document.createElement("script"); s.id = "hs-script-loader"; s.async = true; s.src = "//some-url.com/12345.js"; this.element.nativeElement.appendChild(s); }El script en realidad carga un widget de chat en vivo que se crea dinámicamente en el DOM cuando se carga el script.
Me gustaría eliminar el elemento del DOM cuando se destruya el componente, pero no estoy seguro de cómo crear una referencia a un elemento creado dinámicamente.
He visto ejemplos usando elementRef, pero esto supone que tienes control sobre el elemento y no se crea dinámicamente.
¿Cómo puedo apuntar a un elemento de forma dinámica, similar al uso de la delegación de eventos pero en angular?
Puede agregar una referencia #local" a un contenedor ng o un div que contenga su elemento, y luego en su código, con @ViewChild vincule la referencia y finalmente elimínela con:
@ViewChild('yourLocalReferenceHTMLname') private yourLocalReferenceHTMLname: ElementRef; this.yourLocalReferenceHTMLname.nativeElement.remove();De todos modos, trate de no usar elementRef [De los documentos angulares]:
Utilice la API elementRef como último recurso cuando se necesita acceso directo a DOM. En su lugar, utilice las plantillas y el enlace de datos proporcionados por Angular. Como alternativa, puede usar Renderer2 , que proporciona una API que se puede usar de manera segura incluso cuando no se admite el acceso directo a elementos nativos.
Confiar en el acceso DOM directo crea un estrecho acoplamiento entre su aplicación y las capas de representación, lo que hará que sea imposible separar las dos e implementar su aplicación en un trabajador web.
Literalmente, de este artículo de render2 AQUÍ :
¿Por qué no ElementRef?
Podemos usar la propiedad nativeElement de ElelemtRef para manipular el DOM. La propiedad nativeElement contiene la referencia al objeto DOM subyacente. Esto nos da acceso directo al DOM, sin pasar por Angular.
No tiene nada de malo usarlo, pero no es recomendable por las siguientes razones:
Angular keeps the Component & the view in Sync using Templates, data binding & change detection, etc. All of them are bypassed when we update the DOM Directly. DOM Manipulation works only in Browser. You will not able to use the App in other platforms like in a web worker, in Server (Server-side rendering), or in a Desktop, or in the mobile app, etc where there is no browser. The DOM APIs do not sanitize the data. Hence it is possible to inject a script, thereby, opening our app an easy target for the XSS injection attack.