Tengo un componente de image básico y dentro de él hay un elemento img . ¿Hay alguna manera de pasar los atributos img nativos a la image sin tener que definirlos todos, como alt y aplicarlos a la etiqueta img ?
Aquí hay un pseudo código de lo que quiero decir:
@Component({ selector: 'image', template: '<img [src]="src" [...attrs]>' }) export class ImageComponent { @Input() attrs; } <image img.alt="Some Alternative Value"> <another-component></another-component> </image>Sí, esto se puede hacer (si es lo que buscas...)
@Component({ selector: 'image', template: '<img #imgRef [src]="src">' }) export class ImageComponent { @ViewChild('imgRef') imgRef: ElementRef<HtmlElement>; @Input() attrs; ngAfterViewInit() { // assuming attrs is a key/value object Object.entries(this.attrs).forEach(([key, value]) => { this.imgRef.nativeElement.setAttribute(....) }) } }Que yo sepa, no es posible reflejar los atributos del host del componente en la vista del componente, sin tener que definir manualmente @Input() s para todos los atributos posibles.
Una posible alternativa, si se aplica a usted, es proyectar un elemento img desde fuera de su componente de image , dentro de la vista del componente.
<image> <img alt="Some Alternative Value"> <another-component></another-component> </image> De esa manera, básicamente tienes expuesto el elemento img , donde puedes agregar libremente atributos, entre otros.