樣式不適用於注入 iframe 的角度組件

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

將 assets 文件夾添加到 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']