Obtengo de mi API una página HTML completa como una cadena, que contiene css (tanto en línea como en el encabezado) y javascript, con este aspecto:
<script></script> <style></style> <div></div> . . . </html>No hay archivos externos, solo una página HTML completa.
Traté de configurar document.innerHtml a través de una función para el contenido de la cadena, HTML funciona más o menos en este caso, pero las partes del script son obvias. ignorado
También intenté configurar la plantilla de un componente en la cadena, pero luego recibo muchos errores, por ejemplo, carácter inesperado "EOF" (¿Tiene un "{" sin escape en su plantilla? Use "{{ '{' }}") para escapar de él.) (debido al contenido de js que espero) y una gran cantidad de etiquetas de cierre inesperadas "span". Puede ocurrir cuando la etiqueta ya ha sido cerrada por otra etiqueta. (lea sobre este, solo quiero que angular no toque mi cuerda)
En otro intento, acabo de crear una plantilla con un div, que luego se llena con la cadena. No funcionó debido al saneamiento, después de agregar un bypassSecurityTrustHtml, funcionó, pero el css está completamente desordenado y todo js simplemente se eliminó.
Sé que no es la forma angular de trabajar, pero tenemos un software en ejecución que debe migrarse a angular y las páginas son generadas por un motor python, por lo que no tengo una forma real de cambiar la cadena antes de obtener desde la API. Si hubiera una manera de leer las partes, css, scripts fuera de la cadena y de alguna manera pasarlos por separado a la página, también estaría contento (siempre y cuando no cueste mucho rendimiento)
Dividiría el problema en dos secciones, agregaría html y css y luego agregaría javascript.
Como se indicó, está recibiendo todo el contenido tiene una cadena. Como sabe que el javascript estará entre las etiquetas <script>...</script> , puede obtenerlo usando expresiones regulares u otras formas. Una vez que tenga la URL del script, puede cargarla siguiendo este stackoverflow u otros.
Hay varias formas de agregar scripts que se pueden usar en Angular, y stackoverflow contiene muchos de ellos.
De manera similar al anterior, puede extraer el código HTML y CSS. Una vez hecho esto, puede usar DOMParser Api para convertir su cadena en un elemento DOM adecuado.
Angular permite la manipulación de elementos DOM de una aplicación de forma segura. Esto se hace con la API de Renderer2 . En particular, el método appendChild le permite agregar un elemento DOM a cualquier otro elemento DOM que desee. Puede usar esta API para agregar el contenido que recibió.