样式不适用于注入 iframe 的角度组件答案

【问题标题】：Style wont apply to angular component injected into iframe样式不适用于注入 iframe 的角度组件
【发布时间】：2019-06-13 11:22:05
【问题描述】：

我有一个 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 不支持。

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

【问题讨论】：

您打算如何在不引导应用程序的情况下添加它？
我假设您有您的目的，但为什么该 iframe 中只有一个带有角度的组件而不是原生 Web 组件？
@Lucho 我有一个使用 Angular 构建的网站，该网站使用一个库，该库将地图提供到 iframe 中。我想将我自己的按钮和东西添加到该地图中。由于 z-index 相关问题，我不能将它们放在绝对位置的 iframe 的“顶部”。
明白了，那就用更“干净”的方式来做吧。设置一个仅包含该组件的新 Angular 应用程序，并将其从其 url 加载到 iframe 中，就像使用常规独立 ng 应用程序一样。这对你来说是一个选择吗？

标签： javascript html css angular iframe

【解决方案1】：

将 assets 文件夹添加到 angular.json

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

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

【讨论】：

【解决方案2】：

您可以执行以下操作：

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

【讨论】：

您能否说明这样做的原因以及为什么会有所帮助