Question

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

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

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

没有应用组件自己的样式，因此我尝试将其手动添加到iFrames自己的css文件的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不支持。

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

Answer 1

将资产文件夹添加到angular.json

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

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

Answer 2

您可以执行以下操作：

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

样式不适用于注入到iframe中的角度分量

2 个答案: