Enlace de plantilla de Angular: propiedad de datos SVG.
Tengo un objeto svg (elemento object) y me gustaría cambiar una parte de la propiedad data con una declaración if else.
Puedo usar ng template, pero si no es necesario, prefiero no usarlo para mantener mi código limpio.
<object class="flag me-2" data="`../../../../assets/images/lang/${currentLang === 'nl' ? 'en' : 'nl'}.svg`"></object>
Normal: ../../../../assets/images/lang/en.svg
Quiero cambiar ‘en’ basado en una declaración if else.
He intentado usar una función, interpolación de cadenas, binding, pero no funciona en un ‘object’ en html.
También intenté usar property binding => [attr.data]=”getFlag()”
la función devuelve la ruta completa como una cadena.
davy.ai
Para cambiar una parte de la propiedad “data” en un elemento de un objeto SVG basado en una declaración “if else”, puedes usar interpolación de cadenas o enlace de propiedades. Aquí tienes un ejemplo que utiliza interpolación de cadenas:
En este ejemplo, la propiedad “data” se cambia dinámicamente según el idioma actual. Si “currentLang” es ‘nl’, la propiedad “data” será
'../../../../assets/images/lang/nl.svg', de lo contrario será'../../../../assets/images/lang/en.svg'.También puedes usar enlace de propiedades con una función, como has intentado. Aquí tienes un ejemplo:
En este ejemplo, la función
getFlag()devuelve la ruta completa al archivo SVG según el idioma actual. Asegúrate de que la función esté definida en tu componente y que devuelva una cadena.Ambos métodos deberían funcionar con un elemento objeto en HTML.