我无法找到将文件中的静态 html 注入视图中间的最佳方法。我有一个名为 eula-dialog 的组件,其中该组件尚未执行任何操作,但视图如下所示:
eula-dialog.component.html
<h1 md-dialog-title>Sign EULA</h1>
<mat-dialog-content>
<!-- HOW TO INJECT A FILE HERE -->
<div> REPLACE ME WITH CONTENTS OF FILE</div>
</mat-dialog-content>
<mat-dialog-actions>
<mat-checkbox [(ngModel)]="agreeCheckbox">I have read and agree to the eula</mat-checkbox>
<button md-raised-button color="primary" mat-dialog-close [disabled]="!agreeCheckbox">
I Agree
</button>
</mat-dialog-actions>
我有一个如下所示的文件夹结构:
eula-dialog
eula-dialog.component.html
eula-dialog.component.scss
eula-dialog.component.spec.ts
eula-dialog.component.ts
very-long-readonly-eula-template.html
我无法修改 eula HTML 的内容,它主要包含文本和一些 html 元素,但不是完整的页面,它看起来像这样:
<p>Title</p>
<div> LOTS OF TEXT </div>
最好的方法是什么?
此外,最好不要始终随应用程序加载此 eula html 文件/模板,而仅在需要时发送到客户端。
将静态文件放在 asset 文件夹中,否则告诉 Angular 将其标记为 angular.json 中的 asset。
然后使用
<h1 md-dialog-title>Sign EULA</h1>
<mat-dialog-content>
<!-- HOW TO INJECT A FILE HERE -->
<div [innerHTML]="eulaContent">...</div>
</mat-dialog-content>
<mat-dialog-actions>
<mat-checkbox [(ngModel)]="agreeCheckbox">I have read and agree to the eula</mat-checkbox>
<button md-raised-button color="primary" mat-dialog-close [disabled]="!agreeCheckbox">
I Agree
</button>
</mat-dialog-actions>
// In .ts file
import { DomSanitizer} from '@angular/platform-browser';
eulaContent = '';
constructor(private sanitizer: DomSanitizer)
ngOnInit(){
fetch('/assets/yourlocation.html').then(res => res.text()).then(data => {
this.eulaContent = this.sanitizer.bypassSecurityTrustHtml(data);
})
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)