Angular 7+：将静态 html 文件注入组件视图中间

Question

我无法找到将文件中的静态 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 文件/模板，而仅在需要时发送到客户端。

Answer 1

将静态文件放在 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);
  })
}