funciona - framework angular2




Como fazer com que angular2 (2)

Esta questão já tem uma resposta aqui:

Eu não sei o que estou fazendo de errado, pois nenhum erro é reportado.

Eu tenho uma classe de componentes

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(){}

 }

}

E no meu arquivo de modelo, faço algo assim:

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

Mas isso não parece funcionar. Existe algo mais que eu preciso importar?

Eu estou usando angular-cli "version": "1.0.0-beta.26",


Angular usa {{property}} para interpolação de valores. Essa é a maneira que você iria exibir texto simples em seu div , assim

Solução 1:

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

Mas isso vai escrever texto, não HTML.

Para HTML, você precisará se vincular à propriedade

Solução 2:

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

Note que movi o [innerHtml] para dentro da tag div .

Deixar fora os colchetes se ligaria ao atributo, então você precisaria interpolar novamente

Solução 3:

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

A ligação de propriedade ( Solução 2 ) é o método preferido.


Você precisa adicionar atributos dentro da tag assim.

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




angular