Charger dynamiquement modèle HTML dans angular2

J'ai créé un projet à l'aide de 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 comme

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

Donc quand j'ai le construire avec ng build il génère des fichiers comme ceci ./dist/main.bundle.js le contenu du code comme suit-

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

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

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

Cela signifie que, au moment de la construction du compilateur/bundle-er est la lecture du fichier html et la concaténation de ceux qui dans le générés fichier js.

Mais dans mon cas, le html est aussi dynamique et axés sur le contenu à partir du serveur de côté. Permet de dire que, au lieu de html, mon fichier de modèle est app.composante.jsp et résidant sur une autre serveur ou un dossier tout à fait.

Également que le fichier JSP retourne parfois <h1>Good Morning, {{title}}</h1>
et parfois <h1>Good Afternoon, {{title}}</h1> en fonction de l'heure actuelle du serveur.

Comment obtenir cette fonctionnalité?

Ce que je comprends, c'est que, j'ai besoin de définir une sorte de chargeur de la fonction de dire : loadDynamicTemplate(template_url)

et ont besoin d'utiliser que le chargeur de fonction sur la Composante décorateur modèle de propriété. Dans ce cas, lorsque le main.bundle.JS est généré, il utilise cette fonction. Donc, en exécution angulaire fera appel de cette fonction et de charger le code HTML par ajax et l'utiliser.

Mise à jour de 1

Ici J'ai trouvé une différence entre les SystemJS et Webpack . J'ai aussi trouvé que nous pouvons charger les fichiers HTML au moment de l'exécution si nous pouvons utiliser SystemJS. Je crois donc que ce problème peut être résolu avec SystemJS de configuration. Mais pour qu'un autre problème vient dans la pièce, même si je crois ce que pourrait être une question distincte. Donc je l'ai posté une nouvelle question afin de faire le tri ici.

Probablement si cette question a été résolu, je vais essayer avec SystemJS et ensuite de poster la solution ici si ça aide.

Ce n'est pas trop commun dans Angular2. Voir stackoverflow.com/questions/34784778/...
Dans mon cas, tous mes composant aura le même comportement. Et il est vraiment difficile de définir l'ensemble de mes composants dynamiques. Donc en fait je suis à la recherche de ce genre. template: "<my-template url='./app.component.html'></my-template>". Ici my-template pourrait être une directive et il va charger le code HTML de façon dynamique. Aussi, il faut garder toutes les autres fonctionnalités intacte. Comme il se doit le travail même que templateUrl: './app.component.html'
Je comprends que ce n'est pas trop commun. En fait, j'ai un côté de serveur de système de gestion de contenu Adobe AEM. Qui je veux utiliser pour sa grande fonctionnalité de création. Depuis Angular2 est un grand cadre, je suis sûr qu'il doit y avoir un moyen de la contourner. (Sans changer donc beaucoup de code, Simplement je veux servir les modèles à l'exécution via AJAX appel seulement). S'il vous plaît aider.
Vous pouvez charger du HTML dans les composants existants, mais seulement HTML. Si vous à devenir Angulaire de composants, de directives ou de données ou en cas de liaison, il doit être dans le modèle d'un composant compilé.
avez-vous essayé le ng-dynamique de la bibliothèque ? Je pense qu'il a vraiment faire le travail : github.com/laco0416/ng-dynamic
Oui, je pense que cela pourrait fonctionner. Pouvez-vous s'il vous plaît répondre avec cette. De sorte que je peux sélectionner la réponse si j'ai eu du succès.
Avez-vous jamais comprendre ce AEM et d'angle 2 (ou 4) problème?

InformationsquelleAutor Partha Sarathi Ghosh | 2016-11-24

32

Vous pouvez utiliser [innerHtml] dans un my-template composant 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);
    }
}
```
- Quelque chose comme Good Morning, {{title}} ne résout pas {{title}} de cette façon.
- Pouvez-vous montrer que dans un Plunker?
- La bonne Plunker a jamais été ici : plnkr.co/modifier/uzcYiN je poste un exemple pour @Partha Sarathi Ghosh
- Comment faire pour forcer la configuration par défaut pour servir certains modèles html à partir du dossier du projet?
- Je ne comprends pas. Vous pouvez prendre un coup d'oeil à webpack de la documentation : webpack.github.io/docs
- ne fonctionne pas
- pourriez-vous nous expliquer ce qui ne fonctionne pas pour vous ?
- http.get("/chemin-vers-votre-jsp").carte((html:toute) => html = html.text()).abonnez-vous(c'.myTemplate = html)
- Angulaire ne permet pas de résoudre les liaisons à l'intérieur de [innerHTML], donc si title changements, il ne met pas à jour correctement. Ce que vous pourriez faire est de créer un GreetingComponent qui reçoit les données brutes à partir de votre serveur et de les traiter à l'intérieur Angulaire.
- salut, il ne travaille pas dans angulaire 7. pouvez-vous me donner une idée pour accomplir cette idée.
InformationsquelleAutor Karbos 538
18

Pour interpoler un modèle avec quelques Good Morning, {{title}}, vous pouvez utiliser Suguru Inatomi du "ng-dynamique" de la composante.

Vous devez d'abord l'installer :
```
npm install --save ng-dynamic
```
Puis de l'importer dans votre NgModule :
```
@NgModule({
  imports: [
    ...
    DynamicComponentModule.forRoot({}),
    ...
  ],
  ...
})
export class AppModule {}    
```
Enfin l'utiliser 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 les composants de votre modèle en définissant une SharedModule. J'ai ajouté un personnalisé "mon bouton" avec succès comme dans l'exemple de la documentation ici : https://github.com/laco0416/ng-dynamic
- La façon d'écrire le code est très complexe si j'ai tellement de liaison des variables et des méthodes. Ici je l'ai trouvé plus d'infos sur SystemJs et Webpack. J'ai mis à jour ma question avec les résultats.
- Pourquoi faire d'erreur: ne Peut pas se lier à 'dynamicComponent', car il n'est pas connu de la propriété de 'div' ?
- Peut-être que vous manquez de la star ? *dynamicComponent
- erreur sur la production de la construction "TypeError: Cannot read property 'element' undefined"
InformationsquelleAutor Karbos 538

Il semble que la façon de le faire maintenant est de mettre la responseType lorsque vous faites votre demande. HttpClient-la demande des non-données 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;
        }
      );
  }
}

ne fonctionne pas
il y a aussi une erreur de syntaxe
il a travaillé pour moi

InformationsquelleAutor nbppp2

travaillé avec angulaire 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);
  }
}

InformationsquelleAutor nznoor

0

Pourquoi ne pas avoir tout le modèle dans un fichier et de les afficher en fonction de l'état..
Comme votre ./app.component.html ressemblera:
```
<div *ngIf="isWorld" >
  <h1>  Hello World </h1>
</div>
<div *ngIf="isUniverse" >
  <h1>  Hello Universe </h1>
</div>
```
Une idée de l'effet sur le temps de construction/taille?

InformationsquelleAutor Kiran

Vous devez vous connecter pour publier un commentaire.