javascript - 样式不适用于注入(inject)到iframe中的 Angular 分量

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

在iframe加载时，我通过js添加了组件:

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

组件本身的样式未得到应用，因​​此我尝试将其手动添加到css到iFrames自己的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等，但似乎无济于事。
使其工作的唯一方法是使用encapsulation:ViewEncapsulation.ShadowDom，但IE11不支持。

有人知道我该如何解决吗？

最佳答案

将 Assets 文件夹添加到angular.json

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

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