Comment faire fonctionner angular2 [innerHtml] ?

Question

Je ne sais pas ce que je fais de mal car aucune erreur n'est signalée.

J'ai une classe de composants

import { Component, OnInit, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 testhtml = "<p>Hello world</p>";
    constructor(){}

 }

}

Et dans mon fichier modèle, je fais quelque chose comme ça :

<div class="blog-post">[innerHtml]="testhtml"</div>

Mais cela ne semble pas fonctionner. Y a-t-il autre chose que je dois importer ?

J'utilise angular-cli "version" : "1.0.0-beta.26",

Answer 1

Angular utilise {{property}} pour l'interpolation des valeurs. C'est de cette manière que vous afficherez du texte brut dans votre fichier div comme suit

Solution 1 :

<div class="blog-post">{{testhtml}}</div>

Mais cela va écrire du texte, pas du HTML.

Pour le HTML, vous devrez vous lier à la propriété

Solution 2 :

<div class="blog-post" [innerHtml]="testhtml"></div>

Notez que j'ai déplacé le [innerHtml] à l'intérieur de la div étiquette.

Si l'on omettait les crochets, l'attribut serait lié, et il faudrait alors interpoler à nouveau.

Solution 3 :

<div class="blog-post" innerHtml="{{testhtml}}"></div>

La liaison de propriété ( Solution 2 ) est la méthode préférée.

Answer 2

Vous devez ajouter des attributs à l'intérieur de la balise comme ceci.

<div class="blog-post" [innerHtml]="testhtml"></div>