Стиль не будет применяться к угловому компоненту, введенному в iframe
У меня есть iframe, в который я хочу добавить свой собственный угловой компонент, но я не могу применить какой-либо стиль к компоненту в iframe.
При загрузке iframe я добавляю компонент через js:
let component= document.getElementById('componentId');
let divInIframe= iframeWindow.document.getElementById('divInIframeId');
divInIframe.appendChild(component);
Собственный стиль компонентов не применяется, поэтому я попытался добавить его вручную в css в собственный css-файл iFrames. Также пытался добавить стиль через js после загрузки iframe::
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.
Кто-нибудь понял, как я могу это решить?
Я предполагаю, что у вас есть цель, но почему только один компонент с angular в этом iframe, а не собственный веб-компонент?
@Lucho У меня есть веб-сайт, созданный в angular, который использует библиотеку, которая передает карту в iframe. Я хочу добавить свои собственные кнопки и прочее на эту карту. Я не могу просто поместить их «поверх» iframe с абсолютной позицией из-за проблем, связанных с z-index.
Попался, тогда сделайте это более «чистым» способом. Установите новое приложение angular только с этим компонентом и загрузите его в iframe по его URL-адресу, как вы делаете это с обычным независимым приложением ng. Это вариант для вас?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете сделать следующее:
selector: 'app-name',
templateUrl: './component_name.component.html',
styleUrls: ['./component_name.component.css']
Не могли бы вы указать причину для этого и почему это поможет
Добавьте папку с ресурсами в angular.json.
"projects":{
"AppName":{
...
"assets":[
"src/assets"
]
...
}
}
затем используйте cssLink.href = "assets/component.css";
Как именно вы планируете добавить его без начальной загрузки приложения?