递归 Angular 2 HTML 绑定

Question

这是我的问题，我想在 HTML 模板中包含一个链接到外部网站的按钮。但是，当读取 HTML 时，Google Chrome 表示：

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

似乎 Angular 2 的内部 HTML 属性不允许 2 递归 HTML 绑定。

这是我的代码：

<ion-col width-80 innerHtml="{{ slide.content + '<p><button round full (click)=`' 
+ slide.button.url +'`>'+slide.button.text+'</button>' }}"></ion-col>

(点击)属性被删除，仅(slide.button.text)显示为单文

有什么解决办法吗？

slide 是这样的:

{
    img: 'img/picture.png',
    content: `sometext`,
    button : {
        url: `http://www.foo.com`,
        text: `Site foo`
    }
}

Answer 1

注意：我不知道 ion 事情所以将其更改为 HTML control。将 button 更改为 a (link) 控件。

您可以使用 DomSanitizationService 如下所示，

工作演示：http://plnkr.co/edit/y2BXvIO8egNxJPmM3j43?p=preview

//our root app component
import {Component, Pipe} from '@angular/core'
import {DomSanitizationService} from '@angular/platform-browser';

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

  template: `
    <span [innerHTML]="myHTML"></span>
  `,
})

export class AppComponent {
  slide={
    img: 'img/picture.png',
    content: `sometext`,
    button : {
        url: `http://www.foo.com`,
        text: `Site foo`
    }
  };

  dangerousUrl='<p><a href='+`${this.slide.button.url}`+'>'+`${this.slide.button.text}`+'</a></p>';

  constructor(sanitizer: DomSanitizationService) {
       this.myHTML= sanitizer.bypassSecurityTrustHtml(this.dangerousUrl);
  }
}

递归 Angular 2 HTML 绑定

Recursive Angular 2 HTML Binding

typescript

ionic-framework

ionic2

angular2-template

angular