Carica dynamicmente il modello HTML in angular2

Ho creato un progetto usando angular angular-cli che contiene AppComponent come segue:

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

E app.component.html come

 

Good Morning, {{title}}

Così quando lo costruisco con ng build genera alcuni file come questo ./dist/main.bundle.js che contiene del codice come segue-

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

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

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

Ciò significa che, al momento della compilazione, il compilatore / bundle sta leggendo il file html e concatenandoli nel file js generato.

Ma nel mio caso l’html è anche dinamico e basato sul contenuto dal lato server. Diciamo, invece di html, il mio file modello è app.component.jsp e residente su un server o cartella diversi del tutto.

Inoltre, il file JSP restituisce talvolta

Good Morning, {{title}}

e talvolta

Good Afternoon, {{title}}

seconda del tempo corrente del server.

Come ottenere questa funzionalità?

Quello che capisco è che, devo definire una sorta di funzione di caricamento dire: loadDynamicTemplate(template_url)

e è necessario utilizzare la funzione caricatore sulla proprietà del modello decoratore di componenti. In tal caso, quando viene generato main.bundle.JS, utilizzerà anche quella funzione. Quindi in runtime angular chiamerà questa funzione e caricherà l’HTML di ajax e lo userà.

Aggiornamento 1

Qui ho trovato alcune differenze tra SystemJS e Webpack. Ho anche scoperto che possiamo caricare i file HTML in fase di esecuzione se possiamo usare SystemJS. Quindi credo che questo problema possa essere risolto con la configurazione di SystemJS. Ma per quello un altro problema entra in gioco, anche se credo che potrebbe essere una domanda a parte. Quindi ho pubblicato una nuova domanda per risolverlo qui .

Probabilmente se questa domanda verrà risolta, proverò con SystemJS e quindi pubblicheremo la soluzione qui se è d’aiuto.

Potresti usare [innerHtml] in un componente my-template con qualcosa di simile a questo (non ho provato):

 @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); } }

Per interpolare un modello con un Good Morning, {{title}} , puoi usare il componente “ng-dinamico” di Suguru Inatomi.

Per prima cosa devi installarlo:

 npm install --save ng-dynamic 

Quindi importa nel tuo NgModule:

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

Finalmente lo uso in questo modo:

 @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... } }

È ansible utilizzare i componenti nel modello definendo un SharedModule. Ho aggiunto un "pulsante personale" personalizzato con successo come nell'esempio di documentazione qui: https://github.com/laco0416/ng-dynamic

Sembra che il modo per farlo ora sia impostare il responseType quando si effettua la richiesta. HttpClient-Richiesta di dati non JSON `

 @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; } ); } }

`

lavorato 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); } }

Perché non avere tutto il modello in un file e visualizzarli in base alle condizioni. Come il tuo ./app.component.html sarà simile a:

 

Hello World

Hello Universe

Qualche idea sul suo effetto sul tempo di costruzione / dimensioni?