功能调用在Angular2中被阻止（它们被清理）

Question

我有一个页脚 div ，因为我在typescript文件中追加 innerHtml

HTML代码：

<div class="footerbar" [innerHTML]="printProgressfooterHtmlContent"></div>

TypeScriptCode：`

this.printProgressfooterHtmlContent = '<ul class="nav navbar-nav footerNavBarLeft"><li class="backButtonLi"><a href="#/about"><i class="fa fa-angle-left"></i><h4 class="footerDone">BACK</h4></a></li></ul><ul  class="nav navbar-nav footerNavBarRight"><li class="backButtonLi LiSeperator"><a class="footerProgressLeftAtag"><h4 class="footerDone">|</h4></a></li><li><a ><h4 class="footerDone" (click)="myFunc()">GROUPS</h4></a></li></ul>';

在这里我调用了一个函数 myFunc（），但是当编译器加载时，我会收到警告警告：在控制台中清除HTML剥离的内容

请提供适当的解决方案。

提前致谢。

Answer 1

您应该使用DOMSanitizer：

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

...

constructor(private sanitizer: DomSanitizer)

...

this.printProgressfooterHtmlContent = this.sanitizer.bypassSecurityTrustHtml('<ul class="nav navbar-nav foo...');