Carga dinámicamente la plantilla HTML en angular2

He creado un proyecto usando angular-cli que contiene AppComponent de la siguiente manera:

 import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app works!'; } 

Y app.component.html como

 

Good Morning, {{title}}

Entonces cuando lo construyo con ng build , genera algunos archivos como este ./dist/main.bundle.js que contienen algunos códigos de la siguiente manera-

 /* 586 */ /***/ function(module, exports) { module.exports = "

\n Good Morning, {{title}}\n

\n" /***/ }, /* 587 */

Eso significa que, en el momento de comstackr, el comstackdor / paquete-er está leyendo el archivo html y concatenándolo en el archivo js generado.

Pero en mi caso, el html también es dynamic y está orientado al contenido desde el lado del servidor. Digamos que, en lugar de html, mi archivo de plantilla es app.component.jsp y reside en algún servidor o carpeta diferente.

También ese archivo JSP a veces devuelve

Good Morning, {{title}}

y, a veces,

Good Afternoon, {{title}}

dependiendo de la hora actual del servidor.

¿Cómo lograr esta funcionalidad?

Lo que entiendo es que necesito definir algún tipo de función de carga, por ejemplo: loadDynamicTemplate(template_url)

y necesita usar esa función de cargador en la propiedad de la plantilla del decorador de componentes. En ese caso, cuando se genera main.bundle.JS, usará esa función también. Entonces, en tiempo de ejecución, angular llamará a esta función y cargará el HTML por ajax y lo usará.

Actualización 1

Aquí encontré alguna diferencia entre SystemJS y Webpack. También encontré que podemos cargar los archivos HTML en tiempo de ejecución si podemos usar SystemJS. Así que creo que este problema se puede resolver con la configuración de SystemJS. Pero para eso entra en juego otro problema, aunque creo que podría ser una pregunta separada. Así que publiqué una nueva pregunta para solucionarlo aquí .

Probablemente si esa pregunta se resuelve, intentaré con SystemJS y luego publicaré la solución aquí si ayuda.

Podría usar [innerHtml] en un componente my-template con algo como esto (no lo hice):

 @Component({ selector: 'my-template', template: ` 
`}) export public class MyTemplate { private myTemplate: any = ""; @Input() url: string; constructor(http: Http) { http.get("/path-to-your-jsp").map((html:any) => this.myTemplate = html); } }

Para interpolar una plantilla con Good Morning, {{title}} , puedes usar el componente “ng-dynamic” de Suguru Inatomi.

Primero debes instalarlo:

 npm install --save ng-dynamic 

Luego, importe en su NgModule:

 @NgModule({ imports: [ ... DynamicComponentModule.forRoot({}), ... ], ... }) export class AppModule {} 

Finalmente úsalo así:

 @Component({ selector: 'app-root', template: '
' }) export class AppComponent { bindings: any = {title: "Chuck Norris"}; template: string = `

Good Morning, {{title}}

`; constructor(http: Http) { http.get("/path-to-your-jsp").map((html:string) => this.template = html); //< - You may set bindings in request headers... } }

Puede usar componentes en su plantilla definiendo un SharedModule. Agregué un "mi-botón" personalizado con éxito como en el ejemplo de la documentación aquí: https://github.com/laco0416/ng-dynamic

Parece que la forma de hacerlo ahora es establecer el tipo de respuesta cuando realiza su solicitud. HttpClient-Requesting non-JSON data `

 @Component({ selector: 'my-template', template: '
' }) export public class MyTemplate { private myTemplate: any = ""; @Input() url: string; constructor(http: Http) { http.get("/path-to-your-jsp", { responseType: 'text' }) .subscribe( (data: string) => { this.myTemplate = html; } ); } }

`

trabajado con angular 6

 import { Component, Input } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-root', template: ` 
`, styleUrls: ['./app.component.css'] }) export class AppComponent { private myTemplate: any = ''; constructor(http: HttpClient) { http.get('/service-path', {responseType: 'text'}).subscribe(data => this.myTemplate = data); } }

¿Por qué no tener toda la plantilla en un archivo y mostrarlos de acuerdo con la condición? Al igual que su ./app.component.html se verá así:

 

Hello World

Hello Universe

¿Alguna idea sobre su efecto en el tiempo / tamaño de comstackción?