2016-07-09 14 views
12

angle2を使用して文字列をhtmlで補間する方法。私は角1.xで知っている$interpolate(templateString)(miniScope);があるが、私はangular2のために同じを見つけることができませんでした。Angular2 - htmlを使用して文字列を補間する

は、私はこのようなテンプレートがあるとします。Hello my name is {{name}}

と結合ので、私は私の名前はPardeep

ですこんにちは

のようになりたいname: "<strong>Pardeep</strong>"

のようなものですRefer for angular1

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

答えて

15

[innerHTML]ディレクティブを使用して簡単に達成できます。

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>'; 

} 

更新:

私はそれがRC.1リリース後にこのように動作しません確認。

のは、それがRC.4下記のようにあなたは、私が知っている

@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

DomSanitizationServiceを使用することができ、どのような場合は、 'がmyName = '<入力の場合で動作するようにしましょうタイプ= "チェックボックス"> '; '? –

+0

これは 'DomSanitizationService' APIで動作します。 – micronyks

+0

innerHTMLはまだ機能していますが、本当に本当に持っていなければhtmlを信頼したくありません。「コンテンツセキュリティ」のドキュメントをご覧ください https://angular.io/docs/ts/latest/guide/template- syntax.html#!#other-bindings – Thibs

関連する問題