Angular2 - 用 html 插入字符串

Question

如何使用 angular2 在 html 中插入字符串。我知道在 angular 1.x 中有 $interpolate(templateString)(miniScope);但我还没有找到与angular2相同的东西。

假设我有一个这样的模板:Hello my name is {{name}}

绑定(bind)类似于name: "<strong>Pardeep</strong>"

所以我想要这样的结果

Hello my name is Pardeep

Refer for angular1

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

有什么帮助吗？

Answer 1

您可以简单地使用[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 一起工作，您可以使用 DomSanitizationService，如下所示，

@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