web-dev-qa-db-fra.com

TypeScript - Ajoute HTML à un élément conteneur dans Angular 2

Ce que je veux faire, c’est simplement d’ajouter du code HTML sur un élément ..__ J'ai vérifié certains liens, et je trouve différentes solutions confuses/inutilisables/non recommandées/etc.

En utilisant javascript, je vais faire quelque chose comme ça

var d1 = document.getElementsByClassName('one');
d1.insertAdjacentHTML('beforeend', '<div class="two">two</div>');

Comment puis-je obtenir le même résultat avec TypeScript/angular2, RC5?

MODIFIER

L'élément de classe .one est généré par un js externe et je ne peux pas le modifier.

javascriptangulartypescript
18
Gerald Hughes

1.

<div class="one" [innerHtml]="htmlToAdd"></div>

this.htmlToAdd = '<div class="two">two</div>';

Voir aussi Dans RC.1, certains styles ne peuvent pas être ajoutés avec la syntaxe de liaison

  1. Alternativement
<div class="one" #one></div>

@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  d1.nativeElement.insertAdjacentHTML('beforeend', '<div class="two">two</div>');
}

ou pour empêcher un accès direct au DOM:

constructor(private renderer:Renderer) {}

@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  this.renderer.invokeElementMethod(this.d1.nativeElement', 'insertAdjacentHTML' ['beforeend', '<div class="two">two</div>']);
}
    3. 
constructor(private elementRef:ElementRef) {}

ngAfterViewInit() {
  var d1 = this.elementRef.nativeElement.querySelector('.one');
  d1.insertAdjacentHTML('beforeend', '<div class="two">two</div>');
}
39
Günter Zöchbauer

Avec la nouvelle classe angulaire Renderer2 (expérimental)

constructor(private renderer:Renderer2) {}

  @ViewChild('one') d1:ElementRef;

  ngAfterViewInit() {
    const d2 = this.renderer.createElement('div');
    const text = this.renderer.createText('two');
    this.renderer.appendChild(d2, text);
    this.renderer.appendChild(this.d1.nativeElement, d2);
  }
4
Juan

Vous pouvez faire quelque chose comme ça:

htmlComponent.ts

htmlVariable: string = "<b>Some html.</b>"; // c'est du code HTML dans le code TypeScript que vous devez afficher

htmlComponent.html

<div [innerHtml]="htmlVariable"></div> // voici comment vous affichez le code html de TypeScript dans votre html

3
Stefan Svrkota

Il y a une meilleure solution à cette réponse qui est davantage basée sur Angular. 

  1. Enregistrez votre chaîne dans une variable du fichier .ts

    MyStrings = ["one","two","three"]

  2. Dans le fichier html, utilisez * ngFor.

    <div class="one" *ngFor="let string of MyStrings; let i = index"> <div class="two">{{string}}</div> </div>

  3. si vous voulez insérer dynamiquement l'élément div, il suffit de pousser plus de chaînes dans le tableau MyStrings

    myFunction(nextString){ this.MyString.Push(nextString) }

ainsi, chaque fois que vous cliquez sur le bouton contenant la fonction myFunction (nextString), vous ajoutez effectivement un autre div de classe = "deux" qui agit de la même manière que pour l'insérer dans le DOM avec du javascript pur. 

2
Lorenzo Oliver