Cómo hacer que angular2

Question

Esta pregunta ya tiene una respuesta aquí:

• Enlace HTML angular 18 respuestas

No sé qué estoy haciendo mal, ya que no se informan errores.

Tengo una clase componente

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

 }

}

Y en mi archivo de plantilla, hago algo como esto:

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

Pero esto no parece funcionar. ¿Hay algo más que deba importar?

Estoy usando angular-cli "versión": "1.0.0-beta.26",

Answer 1

Angular utiliza {{property}} para la interpolación de valores. Esa es la forma en que mostrarías texto plano en tu div , así

Solución 1:

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

Pero eso escribirá texto, no HTML.

Para HTML, deberá vincular a la propiedad

Solución 2:

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

Tenga en cuenta que moví el [innerHtml] dentro de la etiqueta div .

Dejar los corchetes se uniría al atributo, por lo que deberá interpolar nuevamente

Solución 3:

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

La unión de propiedad ( Solución 2 ) es el método preferido.

Answer 2

Tienes que agregar atributos dentro de la etiqueta de esta manera.

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