如何在Angular组件HTML模板中加载assets文件夹下的HTML文件

你之前的写法错误原因是：innerHTML属性接收的是HTML字符串内容，不是文件路径，Angular不会自动请求对应路径的文件内容填充进去，所以需要先主动请求HTML文件内容再绑定到innerHTML。 #

第一步：引入HttpClient依赖 #

首先确保你项目的根模块（一般是AppModule）已经导入了HttpClientModule，用来发起HTTP请求拉取静态文件内容：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { ProductComponent } from './product/product.component';

@NgModule({
  declarations: [ProductComponent],
  imports: [BrowserModule, HttpClientModule],
  bootstrap: [ProductComponent]
})
export class AppModule { }

第二步：组件类中请求HTML内容并做安全处理 #

Angular默认会拦截不信任的HTML内容防止XSS风险，所以需要用DomSanitizer标记加载的HTML为安全内容，在你的product.component.ts中编写如下逻辑：

// product.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  detailParaHtml: SafeHtml = '';
  blockParaHtml: SafeHtml = '';

  constructor(
    private http: HttpClient,
    private sanitizer: DomSanitizer
  ) { }

  ngOnInit(): void {
    // 加载detailPara.html
    this.http.get('/assets/product/detailPara.html', { responseType: 'text' })
      .subscribe(htmlContent => {
        this.detailParaHtml = this.sanitizer.bypassSecurityTrustHtml(htmlContent);
      });
    // 加载BlockPara.html
    this.http.get('/assets/product/BlockPara.html', { responseType: 'text' })
      .subscribe(htmlContent => {
        this.blockParaHtml = this.sanitizer.bypassSecurityTrustHtml(htmlContent);
      });
  }
}

第三步：修改模板绑定 #

把模板里的路径改为绑定组件中获取到的HTML变量即可：

<!-- product.component.html -->
<div class="productPage">
....
<div [innerHTML]="detailParaHtml"></div>
....
<div [innerHTML]="blockParaHtml"></div>
</div>

注意事项 #

• 路径直接写/assets/开头的绝对路径即可，不需要写相对路径，避免组件层级不同导致路径报错。
• 如果你插入的HTML包含可执行脚本，默认会被Angular过滤，除非你明确信任该HTML来源，否则不建议开启脚本执行权限，避免XSS安全风险。
• 如果项目配置了自定义的base href，需要对应调整assets的路径前缀。

内容的提问来源于stack exchange，提问作者Rinki Mishra