Estoy creando una aplicación de mensajería usando AngularJS. MessagesData es una matriz que contiene el tipo de mensaje y el contenido del mensaje y enviado por quién.
Cuando uso esta función funciona perfecto,
Pero cuando escribo cualquier código html en la función, el html se aplica en el cuadro de mensaje
Ejemplo :
input("<div>Hello</div>")
crea un div dentro de él, la palabra hola, pero quiero que aparezca todo el elemento en el mensaje
Esta es la función de la que estoy hablando:
function dataToHtml(which){ //check if data = message if(messagesData[which][0]=='message'){ //check if its user message or the other one if(messagesData[which][1]=='mine'){ chatContainer.innerHTML+= ` <div class="chat-message-box"> <div class="mine-message chat-message">${messagesData[which][2]}</div> </div> ` }else if(messagesData[which][1]=='other'){ chatContainer.innerHTML+= ` <div class="chat-message-box"> <div class="other-message chat-message main-bg">${messagesData[which][2]}</div> </div> ` } } }Use el enlace de propiedad de sintaxis de flujo unidireccional:
comment: string; comment = "<p><em><strong>abc</strong></em></p>"; <div [innerHTML]="comment"></div>De documentos angulares: "Angular reconoce el valor como inseguro y lo sanea automáticamente, lo que elimina la etiqueta pero mantiene el contenido seguro, como el elemento". https://angular.io/guide/security#sanitization-example