Angular2-用html插入字符串 [英] Angular2 - Interpolate string with html

问题描述

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

How to Interpolate string with html using angular2. i know in angular 1.x there is $interpolate(templateString)(miniScope); but i haven't find the same for angular2.

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

suppose i have a template like this : Hello my name is {{name}}

和绑定就像name: "<strong>Pardeep</strong>"

所以我想要类似

你好，我叫 Pardeep

请参阅angular1

有关angular2的信息，请参见此处，但我听不清

有什么帮助吗?

推荐答案

您可以简单地使用[innerHTML]指令来完成它.

You can simply use [innerHTML] directive to accomplish it.

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 发布后这种方法是否无法正常工作.

I checked it doesn't work this way after RC.1 release.

假设要使其与 RC.4 一起使用，您可以如下所示使用DomSanitizationService，

Let's say to make it work with RC.4 you can use DomSanitizationService as shown below,

@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

这篇关于Angular2-用html插入字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！