Charger dynamiquement un modèle HTML en angular2

Question

J'ai créé un projet en utilisant angular-cli qui contient AppComponent comme suit :

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

Et app.component.html como

<h1>
  Good Morning, {{title}}
</h1>

Donc quand je le construis avec ng build il génère des fichiers comme celui-ci ./dist/main.bundle.js qui contient du code comme suit .

/* 586 */
/***/ function(module, exports) {

module.exports = "<h1>\n  Good Morning, {{title}}\n</h1>\n"

/***/ },
/* 587 */

Cela signifie qu'au moment de la construction, le compilateur/l'éditeur de bundle lit le fichier html et le concatène dans le fichier js généré.

Mais dans mon cas, le html est aussi dynamique et axé sur le contenu du côté serveur. Disons qu'au lieu de html, mon fichier modèle est app.component.jsp et résidant sur un serveur ou un dossier complètement différent.

De plus, ce fichier JSP renvoie parfois <h1>Good Morning, {{title}}</h1> et parfois <h1>Good Afternoon, {{title}}</h1> en fonction de l'heure actuelle du serveur.

Comment réaliser cette fonctionnalité ?

Ce que je comprends, c'est que je dois définir une sorte de fonction de chargement, par exemple : loadDynamicTemplate(template_url)

et j'ai besoin d'utiliser cette fonction de chargement sur la propriété du modèle de décorateur de composant. Dans ce cas, lorsque le fichier main.bundle.JS est généré, il utilise également cette fonction. Ainsi, lors de l'exécution, Angular appellera cette fonction, chargera le HTML par ajax et l'utilisera.

Mise à jour 1

Ici J'ai trouvé quelques différences entre SystemJS et Webpack. J'ai également découvert que nous pouvons charger les fichiers HTML en cours d'exécution si nous utilisons SystemJS. Je pense donc que ce problème peut être résolu avec la configuration de SystemJS. Mais pour cela, un autre problème entre en jeu, bien que je pense que cela pourrait être une question distincte. J'ai donc posté une nouvelle question pour faire le tri. ici .

Si cette question est résolue, j'essaierai probablement avec SystemJS et je posterai la solution ici si elle est utile.

Answer 1

Vous pourriez utiliser [innerHtml] dans un fichier my-template avec quelque chose comme ceci (je n'ai pas testé) :

@Component({
    selector: 'my-template',
    template: `
<div [innerHtml]="myTemplate">
</div>
`})
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);
    }
}

Answer 2

Pour interpoler un modèle avec des Good Morning, {{title}} vous pouvez utiliser le composant "ng-dynamic" de Suguru Inatomi.

Vous devez d'abord l'installer :

npm install --save ng-dynamic

Puis importez dans votre NgModule :

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

Enfin, utilisez-le comme ceci :

@Component({
  selector: 'app-root',
  template: '<div *dynamicComponent="template; context: bindings;"></div>'
})
export class AppComponent {
  bindings: any = {title: "Chuck Norris"};
  template: string = `
    <h1>Good Morning, {{title}}</h1>
  `;
  constructor(http: Http) {
    http.get("/path-to-your-jsp").map((html:string) => this.template = html); //<- You may set bindings in request headers...
  }
}

Vous pouvez utiliser des composants dans votre modèle en définissant un SharedModule. J'ai ajouté un bouton personnalisé "my-button" avec succès comme dans l'exemple de la documentation ici : https://github.com/laco0416/ng-dynamic

Answer 3

A travaillé avec angular 6

import { Component, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

Answer 4

Il semble que la façon de procéder consiste maintenant à définir le type de réponse (responseType) lorsque vous faites votre demande. HttpClient-Requête de données non-JSON `

@Component({
  selector: 'my-template',
  template: '<div [innerHtml]="myTemplate"></div>'
})
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;
        }
      );
  }
}

`

Answer 5

Pourquoi ne pas avoir tous les modèles dans un seul fichier et les afficher en fonction de la condition Par exemple, votre ./app.component.html aura l'air de ressembler :

<div *ngIf="isWorld" >
  <h1>  Hello World </h1>
</div>
<div *ngIf="isUniverse" >
  <h1>  Hello Universe </h1>
</div>

Une idée de son effet sur la durée et la taille de la construction ?