#css #angular #bootstrap-4
Вопрос:
Я создал приложение angular (7.2), которое будет повторно использоваться в качестве одного компонента в нескольких приложениях, таких как приложения MVC и PHP. Во время разработки я использовал ng serve, и компонент выглядел идеально стилизованным. Как только я попытался интегрировать этот компонент в существующее приложение MVC, у меня начались проблемы со стилем. Приложение MVC использует специальную версию bootstrap, приложение angular использует @ng-bootstrap/ng-bootstrap bootstrap 4, когда я включаю свой компонент, он переопределяет настройки начальной загрузки, и стиль родительской страницы испорчен.
Мой пакет.json содержит:
"@fortawesome/angular-fontawesome": "^0.3.0",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@ng-bootstrap/ng-bootstrap": "^4.1.1",
"bootstrap": "^4.0.0-alpha.6",
"ngx-bootstrap": "^4.1.1"
Угловой.json:
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./projects/mycomponent/src/styles.css"
],
Если я удалю загрузочную загрузку из Angular и буду полагаться на то, что родительское приложение также будет использовать загрузочную загрузку, мой компонент (с незначительными корректировками) по-прежнему будет выполнен правильно, но это создаст зависимость, которую я не хочу иметь.
Я также попытался удалить css начальной загрузки из стилей angular.json и добавить его непосредственно в стили компонентов: [«./app.component.css», «./../node_modules/bootstrap…css»], но это тоже не сработало, так как похоже, что css не экспортируется таким образом (подробнее об этом).
Я знаю, что могу использовать IFrame для инкапсуляции моего компонента, но… действительно? Сейчас уже не девяностые! И мне нужно взаимодействовать с одним и тем же окном, используя глобальные объекты javascript (это долгая история), и использовать postMessage, который не используется в IFrame.
Я попытался использовать ViewEncapsulation.ShadowDOM для компонента, но это не решило проблему начальной загрузки, я попытался найти префиксы, изоляцию или рекомендуемые технологии, но здесь я прошу руководства.