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

将静态文件放在 assets 文件夹中，否则告诉 angular 将其标记为 angular.json 中的资产。

然后使用

<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);
  })
}