Quiero ejecutar ciertas líneas de diagnóstico de Javascript a medida que desarrollo que la consola registrará el atributo alt en todas las etiquetas <img> en el HTML, por ejemplo. Esto es puramente para pruebas y, por supuesto, no irá a producción. En un solo componente, normalmente ejecutaría esto dentro de los ganchos del ciclo de vida ngAfterContentInit() y/o ngOnChanges() , por lo que ejecutaría este script siempre que las imágenes en el HTML se hayan cargado y renderizado.
El JS sería algo simple como getElementsByTagName('img')[0].getAttribute('alt') , pero ¿cómo puedo ejecutar esto cada vez que se muestra un componente, para poder verificar este tipo de cosas sin agregar una importación? a cada componente individual? ¿Hay algo que pueda hacer en AppModule, por ejemplo, que controle los componentes que se cargan? También me gustaría ejecutar este tipo de scripts en componentes cargados de forma dinámica/perezosa, si eso es posible.
Puede usar una directiva personalizada para este propósito, defina el selector de img global en la directiva personalizada. Luego use la clase ElementRef para acceder al valor de los atributos alternativos de la imagen.
import { Directive, ElementRef, isDevMode, OnInit } from '@angular/core'; @Directive({ selector: 'img', }) export class ImgDirective implements OnInit { constructor(private element: ElementRef) {} ngOnInit() { if (isDevMode) { console.log(this.element.nativeElement.getAttribute('alt')); } } }