La propiedad del componente no se está representando en el innerHTML html.
Estoy incluyendo un archivo svg en mi componente con la ayuda de innerHTML.
Mi archivo svg tiene algunas propiedades que están definidas y establecidas en mi Componente como ancho, alto, etc.
El contenido del archivo svg se renderiza en el componente a través de innerHTML, pero los valores de las propiedades no se renderizan.
@Component({
selector: ‘mi-svg’,
template: ‘
‘
})
export class MiComponenteSvg implements OnInit {
@Input() texto = "modelo de prueba";
public contenidoSvg: any;
constructor(private readonly httpClient: HttpClient) {}
ngOnInit(): void {
this.httpClient.get(ruta).subscribe((res) => {
this.svgContents = this.sanitizer.bypassSecurityTrustHtml(res as string);
}); // obtiendo la cadena de html
}
}
En el archivo Svg:
Hay
{{texto}}
El resultado es:
La propiedad texto no se está mostrando.
Nota: La propiedad texto es solo un ejemplo. También estoy utilizando múltiples propiedades en el componente para establecer el ancho y el alto en el svg, que tampoco se están mostrando.
davy.ai
Cuando se utiliza innerHTML para renderizar archivos SVG en un componente de Angular, es importante tener en cuenta que las propiedades establecidas en el componente pueden no ser renderizadas. Esto se debe a que las propiedades se establecen dentro del contexto del componente y es posible que no se transmitan al archivo SVG.
Para asegurarse de que las propiedades sean renderizadas, una solución es utilizar la vinculación de datos en lugar de innerHTML. Esto se puede lograr creando un componente SVG y estableciendo las propiedades como entradas. Luego, el archivo SVG puede ser importado al componente y las propiedades pueden ser vinculadas a los componentes SVG.
Aquí hay un ejemplo:
En el componente SVG:
En el componente principal:
Esto renderizará un componente SVG con un ancho de 100, una altura de 50 y un texto de “Hola Mundo”.
Utilizar la vinculación de datos en lugar de innerHTML garantizará que las propiedades establecidas en el componente se transmitan al archivo SVG y se rendericen correctamente.