Tengo una plantilla de Angular que intenta obtener una cadena que es un elemento HTML, pero la cadena no se representa correctamente.
Angular Html (para su información, este es un subelemento en una repetición ng):
<div class="right-column">{{item.map[label]}}</div>Esta cadena se extrae y esencialmente se formateará de la siguiente manera:
"<a href="..." target="_blank"> Click Here </a>"El resultado con esta plantilla es la cadena exacta que se muestra en el DOM (con algunas entidades html sustituidas).
El elemento resultante en el DOM se ve así:
<div class="right-column ng-binding"><a href="..." target="_blank">Click Here</a></div>Noté que si edito el HTML en las herramientas de desarrollo del navegador y reemplazo las entidades html (< y >) con los caracteres reales < y >, el elemento html se representa correctamente.
He intentado usar [innerHTML]="item.map[label]" en la plantilla, lo que da como resultado que no se represente nada. También probé ng-bind-html="item.map[label]" que estaba dando errores incluso cuando usaba ngSanitize en el archivo del controlador js.
No estoy seguro de qué más probar para una solución adecuada. Si hay una manera en que puedo formatear la cadena que se pasa sin alterar la plantilla angular, sería preferible, ya que hay otros formatos que se pasan a la plantilla además de este estilo de etiqueta.
Veo que hay un error tipográfico
"<a href="..."> target="_blank"> Click Here </a>"debiera ser:
"<a href="..." target="_blank"> Click Here </a>" Creo que el enlace a [innerHTML] debería funcionar, si no funciona, puede decirle a angular que el HTML es seguro y que pasa por alto el proceso de desinfección. Lo logra creando una canalización que aplica el DomSanitizer de bypassSecurityTrustHtml en la cadena HTML. Ejemplo de slackblitz:
https://stackblitz.com/edit/angular-2baxog
Como referencia, lee más aquí Enlace HTML angular