Construyendo una aplicación en Angular, y queremos agregar un componente bastante complejo, en un sentido general, no en un sentido Angular, que fue completamente construido en Javascript, originalmente para un propósito separado. El contenido de Javascript actualmente abarca varios archivos; en aras de la simplicidad, diremos que hay model.js , library1.js y library2.js , pero en realidad son más que solo esos tres. La función render() de model.js construye el componente.
model.js a angular.json , pero cuando voy a mi página model.html en el lado Angular, las etiquetas <script> no parecen funcionar en absoluto, ya sea:
<script> render(); </script>o
<script> console.log("Hello world!"); </script>¿Hay alguna manera de forzar el trabajo, o una mejor manera de hacer que esto funcione en general?
Si está tratando de agregar una etiqueta directamente debajo de un componente HTML, creo que no funcionará.
There is no Angular2 way of adding a script tag to a template.
Puede hacer lo siguiente en el archivo modal.component para agregar dinámicamente una etiqueta de secuencia de comandos y usarla así:
constructor(private elementRef:ElementRef) {}; ngAfterViewInit() { var s = document.createElement("script"); s.type = "text/javascript"; s.src = "http://somedomain.com/somescript"; this.elementRef.nativeElement.appendChild(s); }Ver también - Adición de scripts al componente
En su caso, puede eliminar el archivo JS de angular.json y cargarlo en tiempo de ejecución de esta manera:
private addRenderJS() { const s = this.doc.createElement('script'); s.src = '/path/my-render-lib.js'; const head = this.doc.getElementsByTagName('head')[0]; const s1 = this.doc.createElement('script'); s1.type = 'text/javascript'; s1.innerHTML = ` render(); `; head.appendChild(s); head.appendChild(s1); }