将函数与 angular 7 中注入的 html 绑定 [英] Bind a function with the injected html in angular 7
本文介绍了将函数与 angular 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
推荐答案
Implement safeHtml
pipe;它不是开箱即用的:
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);
}
}
这篇关于将函数与 angular 7 中注入的 html 绑定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文