Angular 应用程序中包含所有 css 的 HTML 网页

Question

我是 Angular 新手，正在尝试解决有关在我的 Angular 应用程序中显示 HTML 网站的问题。 包含所有资源（如图像、css 文件等）的网页存储在外部服务器上。网站包含文本、图像、自己的样式、css 等。当我在网络浏览器中打开此类网站时，Everythink 工作正常。当我尝试在我的应用程序中显示此类页面时，很多问题都没有解决。

我使用innerHtml在应用程序中显示页面：

<div [innerHtml]="content"></div>

所有链接在显示之前都被更改为直接链接。显示文本和图像，但不应用样式。也许问题与指向 .css 的链接位于 块中的事实有关？

希望某人像我一样遇到问题并可以提供帮助:) 提前致谢。

Answer 1

您可以尝试Sanitize（请阅读Angular 的文档，了解使用DomSanitizer 的含义）您的html，然后再将其放入html。

在您的组件中，注入 DomSanitizer，并绕过安全性：

safeContent;
constructor(private sanitizer:DomSanitizer){
    const content = "your html";
    this.safeContent = this.sanitizer.bypassSecurityTrustHtml(content);
}

在你的 html 中：

<div [innerHtml]="safeContent"></div>