Привязать функцию с введенным HTML в угловых 7

Question

Я хотел связать функцию с внедренным html во время выполнения, используя innerHTML.Мой компонент

@Component({
  selector: 'my-app',
  template: `<div [innerHtml]="myHTML | safeHtml"></div>`,
  styleUrls: ['/my-app.css'], encapsulation: ViewEncapsulation.ShadowDom
})
export class MyApp implements OnInit {
	myHTML = `<button (click)="clickMe()" type="button" class="btn btn-secondary">+</button>`
	constructor() {}
  
  clickMe() {
    console.log("Function is binded using the inner html tag")
  }
}

Я пытался, но, похоже, не работает.Я не уверен, что что-то пропустил.Любая помощь приветствуется

Answer 1

Реализация safeHtml труба;это не выходит из коробки:

@Pipe({
  name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) { }

  transform(value: string): any {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }
}