将函数与角度7中注入的html绑定

问题描述

我想在运行时使用innerHTML将函数绑定到注入的html中.我的组件

I wanted to bind a function into the injected html at run time using innerHTML. My component

@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")
  }
}

我尝试过，但似乎不起作用.我不确定是否错过了什么.感谢您的帮助

I tried but it does not seem to work. I am not sure if I have missed something. Any help is appreciated

推荐答案

实施safeHtml管道；它不是开箱即用的:

Implement safeHtml pipe; it does not come out of box:

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

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

这篇关于将函数与角度7中注入的html绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！