Angular 10+通过API GET加载HTML和CSS遇解析错误如何解决？

开发者阿泽

2026-10-1

Angular 10+ 动态加载接口返回HTML/CSS的解决方案

报错原因排查

报错由两处代码错误直接导致：

HttpClient.get 的配置参数格式错误：responseType 是独立的顶层配置项，不属于headers的属性，且你错误将text类型强转为json，导致Angular默认按JSON格式解析返回的HTML文本，触发解析失败。
模板中属性名拼写错误：你写的[innherHtml] 正确拼写为 [innerHTML]。

代码修正方案

1. 服务层代码修正

调整GetContent方法的请求配置：

GetContent() {
    const uri = `http://localhost:3000/api/books/`;
    return this.http.get(uri, {
      headers: {'Accept': 'text/html'},
      responseType: 'text'
    });
}

2. 组件层代码修正

Angular默认会过滤动态插入HTML中的样式、脚本等敏感内容，需要通过DomSanitizer标记内容为安全资源：

import { Observable, map } from 'rxjs';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

// 组件类内部代码
bodyHtml: Observable<SafeHtml>;
constructor(
  private yourContentService: YourContentService,
  private sanitizer: DomSanitizer
) {
  this.bodyHtml = this.yourContentService.GetContent().pipe(
    map(html => this.sanitizer.bypassSecurityTrustHtml(html))
  );
}

3. 模板代码修正

修正属性拼写：

<div [innerHTML]="bodyHtml | async"></div>

动态加载CSS资源方案

如果需要单独加载接口返回的CSS资源，可以通过Renderer2动态创建style标签插入到组件视图中：

import { Renderer2, ElementRef } from '@angular/core';

constructor(
  private renderer: Renderer2,
  private el: ElementRef
) {}

loadCss(cssContent: string) {
  const styleEl = this.renderer.createElement('style');
  styleEl.textContent = cssContent;
  this.renderer.appendChild(this.el.nativeElement, styleEl);
}