功能调用在 Angular2 中被阻止(它们已清理)

Question

嗨，我有一个页脚div，我正在从打字稿文件附加innerHtml

网页代码：

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

打字稿代码：'

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...');