Angular 2+动态绑定的HTML对象不调用组件函数

Question

下面是我的代码，动态绑定的html对象没有调用相应的组件功能。在Angular1.x中，我们可以通过$ compile轻松实现，但在angular2 +中，我不知道如何实现如下所示。非常感谢任何帮助。

import { DomSanitizer } from '@angular/platform-browser'

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    console.log(this.sanitized.bypassSecurityTrustHtml(value))
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div [innerHtml]="html | safeHtml">
    </div>
  `,
})
export class App {
  name:string;
  html: safeHtml;
  constructor() {
    this.name = 'Angular2'
    this.html = "<input type="text" (ngModelChange)="navigateToCasual($event)" name="name"><input type="radio" name="name">
    <input type="button" (click)="navigateToCasual()" name="name">";
  }
navigateToCasual(){
    console.log("clicked")
  }
}