如何从 html 页面获取内部 html 并将其显示在 Angular 组件上？

Posted 2023-05-07

【中文标题】如何从 html 页面获取内部 html 并将其显示在 Angular 组件上？

【英文标题】：How to get inner html from an html page and display it on an angular component?

【发布时间】：2021-10-31 15:49:15

【问题描述】：

我有以下页面“../posts/postxx.html”，我想以编程方式获取页面的内部HTML（即<h1>My Blog Post</>...等）并将其插入到一个div中角分量？我一直在尝试这样的

ngOnIinit 
  this.fileUrl = `../posts/$this.id/$this.id.component.html`;
  fetch(this.fileUrl)
    .then((r) => 
      r.text().then((d) => 
        let blog = d
        console.log(blog);
      )
    )
,

但我得到了无法获取错误：<pre>Cannot GET /posts/...!

【问题讨论】：

ngOnIinit ???

您是否将帖子目录定义为 angular.json 中的资产？您需要这样做才能直接访问文件，而不是依赖 Angular 的路由

感谢您的回复，@ShamPooSham，是的，我试过了，在 angular.json/assets 中添加了一个文件夹帖子，并尝试使用 iframe [src]="../assets/posts"，但它没有用。

@AlexCocan 你可能很接近但参考错误。你能用你的设置更新你的问题并在你完成后再次标记我吗？

感谢@ShamPooSham，但是我不得不放弃这个解决方案，因为我找到了一个可以接受的解决方法。关于 src，它是预测的 VS 路径，因此我怀疑是错误的。我将保持开放状态，因为我仍然有兴趣看到解决方案，因此如果您有时间，请在 stackblitz.io 上发布示例/演示。

【参考方案1】：

也许只是在你的 html 页面中放一个 iframe ：

<iframe [src]="fileUrl"></iframe>

【讨论】：

对不起，试过了，但不起作用，不读取文件 url，只显示 iframe！感谢您的尝试，不胜感激！