如何获取HTML页面的innerHTML并展示到Angular组件中

报错根本原因 #

你遇到的Cannot GET /posts/...是404错误，本质是Angular开发/生产环境的静态资源服务器下不存在你请求的对应HTML文件：

• Angular默认不会将src目录下的自定义非资源目录打包到最终构建产物
• 相对路径请求会受当前页面路由影响，实际请求路径和你预期不符

步骤1：配置静态资源打包规则 #

找到项目根目录的angular.json文件，按如下路径修改配置：

{
  "architect": {
    "build": {
      "options": {
        "assets": [
          "src/favicon.ico",
          "src/assets",
          "src/posts" // 新增这行，如果你把posts目录放在src根目录下
          // 如果posts放在assets下就写"src/assets/posts"
        ]
      }
    }
  }
}

修改完成后必须重启ng serve命令，配置才会生效

步骤2：修正请求路径和代码错误 #

你原来的代码存在两个明显语法问题：

• 生命周期钩子拼写错误：ngOnIinit → 正确是ngOnInit()
• 缺少错误捕获逻辑，无法定位其他异常

如果要将获取到的HTML插入到组件视图中，还需要调用Angular的DomSanitizer处理内容，避免XSS防护拦截合法HTML。

完整修正代码示例：
首先组件类引入依赖：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
// 也可以用Angular自带的HttpClient替代原生fetch，更适配Angular生态
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-blog-post',
  template: `<div [innerHTML]="blogContent"></div>`
})
export class BlogPostComponent implements OnInit {
  blogContent: SafeHtml = '';
  id = 'postxx'; // 你的动态id

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

  ngOnInit(): void {
    // 用绝对路径请求，避免受当前路由影响
    const fileUrl = `/posts/${this.id}/${this.id}.component.html`;
    // HttpClient写法示例
    this.http.get(fileUrl, { responseType: 'text' })
      .subscribe({
        next: (htmlContent) => {
          console.log(htmlContent);
          // 处理为安全HTML后绑定到视图
          this.blogContent = this.sanitizer.bypassSecurityTrustHtml(htmlContent);
        },
        error: (err) => {
          console.error('加载HTML失败', err);
        }
      })

    // 保留原生fetch的写法参考
    /*
    fetch(fileUrl)
      .then(res => {
        if (!res.ok) throw new Error('请求失败')
        return res.text()
      })
      .then(htmlContent => {
        this.blogContent = this.sanitizer.bypassSecurityTrustHtml(htmlContent);
      })
      .catch(err => console.error(err))
    */
  }
}

注意事项 #

• 如果使用HttpClient，需要先在根模块AppModule的imports数组中导入HttpClientModule
• 如果你的posts目录没有放在src下，而是放在项目根目录，修改assets配置时对应调整路径即可
• 如果你的Angular项目配置了base href，请求路径需要加上base href的前缀，比如base href为/blog/的话，路径改为/blog/posts/${this.id}/${this.id}.component.html

内容的提问来源于stack exchange，提问作者Alex Cocan