样式不适用于注入到 iframe 中的角度组件

Question

我有一个 iframe，我想在其中附加我自己的角度组件，但我无法将任何样式应用于 iframe 中的组件。

在 iframe 加载上，我通过 js 添加组件：

    let component= document.getElementById('componentId');
    let divInIframe= iframeWindow.document.getElementById('divInIframeId');
    divInIframe.appendChild(component);

组件自己的样式没有得到应用，所以我尝试手动将其添加到 css 到 iFrame 自己的 css 文件中。还尝试在 iframe 加载后通过 js 添加样式：

let cssLink = document.createElement("link");
    cssLink.href = "../../assets/component.css";
    cssLink.rel = "stylesheet";
    cssLink.type = "text/css";
    iframDoc.head.appendChild(cssLink);

样式仍未应用于组件。

尝试过ViewEncapsulation.None等，但似乎没有任何帮助。使其工作的唯一方法是使用封装：ViewEncapsulation.ShadowDom，但在IE11中不支持。

有人知道我该如何解决这个问题吗？

Answer 1

将 assets 文件夹添加到 angular.json

"projects":{
   "AppName":{
      ...
      "assets":[
        "src/assets"
      ]
      ...
    }
 }

然后使用cssLink.href = "assets/component.css";

Answer 2

我可以告诉你的是，当你在组件中附加或注入任何html时，任何样式或类都不会被angular考虑，这是默认行为，你可以做的是将封装更改为封装：ViewEncapsulation.none（强烈不推荐）。或者，您可以使用清理器清理外部代码。我建议您查看DomSanitizer文档

Answer 3

您可以执行以下操作：

selector: 'app-name',
templateUrl: './component_name.component.html',
styleUrls: ['./component_name.component.css']