Angular2 - 使用HTML插值字符串

Question

如何使用Angular2插值处理包含HTML的字符串。我知道在Angular 1.x中有$interpolate(templateString)(miniScope);，但我没有找到相同的方法在Angular2中。

假设我有一个这样的模板：Hello my name is {{name}}，绑定是这样的：name: "<strong>Pardeep</strong>"。所以我想要的结果是：

Hello my name is Pardeep

请参考Angular1版本。对于Angular2，可以参考这里，但我无法清楚地理解。有任何帮助吗？

- Pardeep Jain

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

- micronyks

---

我知道，如果 myName='<input type="checkbox">'; 的情况下怎么办？ - Pardeep Jain

现在使用DomSanitizationService API来检查它是否工作。 - micronyks

innerHTML 仍然有效，但除非你真的非常需要，否则不要信任 html... 查看“内容安全性”下的文档。https://angular.io/docs/ts/latest/guide/template-syntax.html#!#other-bindings - Thibs