2016-07-09 38 views
12

Come interpolare stringa con html utilizzando angular2. so in 1.x angolare c'è $interpolate(templateString)(miniScope); ma non ho trovato lo stesso per angular2.Angular2 - Interpola stringa con html

Supponiamo che io sono un modello come questo: Hello my name is {{name}}

e vincolante è come name: "<strong>Pardeep</strong>"

quindi voglio il risultato come

Ciao il mio nome è Pardeep

Refer for angular1

for angular2 see here but i'm unable to understand clearly

aiuto?

risposta

15

È sufficiente utilizzare la direttiva [innerHTML] per eseguirla.

http://plnkr.co/edit/6x04QSKhqbDwPvdsLSL9?p=preview

import {Component, Pipe} from '@angular/core' 

@Component({ 
    selector: 'my-app', 
    template: ` 
      Hello my name is <span [innerHTML]="myName"></span> 
    `, 
}) 
export class AppComponent { 

    myName='<strong>Pardeep</strong>'; 

} 

Aggiornamento:

ho controllato che non funziona in questo modo dopo RC.1 rilascio.

Diciamo per farlo funzionare con RC.4 è possibile utilizzare DomSanitizationService come mostrato di seguito,

@Component({ 
    selector: 'my-app', 

    template: ` 
    <div [innerHTML]="myCheckbox"></div> 
    `, 
}) 
export class AppComponent { 

    dangerousUrl='<input type="checkbox">'; 

    constructor(sanitizer: DomSanitizationService) { 

    this.myCheckbox= sanitizer.bypassSecurityTrustHtml(this.dangerousUrl); 
    } 
} 

http://plnkr.co/edit/Yexm1Mf8B3FRhNch3EMz?p=preview

+0

so, e che in caso di se 'myName = ' '; '? –

+0

Verifica ora funziona con l'API 'DomSanitizationService'. – micronyks

+0

innerHTML funziona ancora e non vuoi fidarti di html a meno che tu non abbia davvero troppo ... Guarda la documentazione sotto 'Content Security' https://angular.io/docs/ts/latest/guide/template- syntax.html #! # other-bindings – Thibs