typescript - Enlace HTML Recursivo en Angular 2

Aquí está mi problema, quiero incluir un botón dentro de una plantilla HTML, que enlace a un sitio web externo. Pero, cuando se lee HTML, Google Chrome dice:

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

Parece que el atributo innerHTML de Angular 2 no permite 2 enlaces HTML recursivos.

Aquí está mi código:

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

El atributo (click) se elimina, y solo (slide.button.text) se muestra como texto único.

¿Alguna solución?

slide es así :

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

Respuesta #1

NOTA: No sé la cosa de ion, así que la cambié a control HTML. Cambié botón a control a (enlace).

Puedes usar DomSanitizationService como se muestra a continuación,

demo de trabajo: 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);
  }
}