web-dev-qa-db-fra.com

Comment ajouter dynamiquement innerHTML avec 2 composants angulaires

Je crée des documents pour une bibliothèque de composants. Je veux 1 chaîne de HTML qui génère à la fois le composant de la page et la documentation correspondante.

Ce que je veux:

 enter image description here

Ce que j'ai:

 enter image description here

Lorsque j'inspecte le code HTML, les balises my-button ne sont pas présentes. Ils sont supprimés lorsque j'utilise innerHTML.

Mon code composant:

private flatButtons = `<div class="button-wrapper">
      <my-button [type]="'default'" [raised]="false">Default</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'primary'" [raised]="false">Primary</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'success'" [raised]="false">Success</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'info'" [raised]="false">Info</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'warning'" [raised]="false">Warning</my-button>
    </div>
    <div class="button-wrapper">
      <my-button [type]="'danger'" [raised]="false">Danger</my-button>
    </div>`

constructor() {}

getCode() {
    return html_beautify(this.flatButtons, this.options)
}

Mon modèle HTML:

<div class="row">
<div class="col-sm-6 col-xs-12">
  <mi-card title="Flat Buttons" baCardClass="with-scroll button-panel">
    <div id="flatButtons" [innerHTML]="getCode()">
    </div>
  </mi-card>
</div>
<div class="col-sm-6 col-xs-12">
  <pre>{{getCode()}}</pre>
</div>

angularinnerhtml
8
collinglass

Angular ne traite pas le code HTML ajouté de manière dynamique, il l’a simplement ajouté textuellement, à l’exception de certaines opérations de nettoyage visant à éviter les problèmes de sécurité. Voir Dans RC.1, certains styles ne peuvent pas être ajoutés avec la syntaxe de liaison pour savoir comment empêcher le désinfectant de supprimer le code HTML.

Vous pouvez utiliser ViewContainerRef.createComponent() comme indiqué dans 2 onglets dynamiques angulaires avec les composants sélectionnés par l'utilisateur pour ajouter des composants de manière dynamique.

Il existe également des solutions disponibles pour créer des composants de manière dynamique, comme indiqué dans Équivalent de $ compile in Angular 2

5
Günter Zöchbauer

J'accepte la réponse de Gunter, car elle répond à ma question.

Pour ceux que cela intéresse, j'ai résolu mon problème en créant un composant et en l'exigeant.

J'ai créé un composant stupide:

import {Component} from '@angular/core';


@Component({
  selector: 'flat-buttons',
  template: require('./flatButtons.html'),
})
export class FlatButtons {

  constructor() {
  }
}

Et puis mon template HTML modifié:

<div class="col-sm-6 col-xs-12">
  <mi-card title="Flat Buttons" baCardClass="with-scroll button-panel">
    <flat-buttons></flat-buttons>
  </mi-card>
</div>
<div class="col-sm-6 col-xs-12">
  <h3>Code Snippet</h3>
  <div class="well">
    <pre>{{getFlatButtons()}}</pre>
  </div>
</div>

Et mon code de composant modifié:

private flatButtons = require('./components/flatButtons/flatButtons.html')

constructor() {}

getFlatButtons() {
    return html_beautify(this.flatButtons, this.options)
}
0
collinglass