Изолировать загрузочный CSS от одного углового компонента?
Можно ли изолировать файл CSS Bootstrap от одного компонента Angular?
При глобальном включении файла в styles.css или .angular-cli.json глобальные стили вызывают проблемы с другими компонентами, которые не должны использовать загрузочную загрузку. Я попытался сделать это, импортировав его из файла CSS компонента, но стили не отображаются должным образом ...
Я использую Angular 5 и Angular Cli 1.7.2.
Ответы 1
вы можете явно установить стратегию инкапсуляции, используя свойство инкапсуляции. Для вашего случая установите значение ViewEncapsulation.Native.
@Component({
// ...
encapsulation: ViewEncapsulation.Native,
styles: [
// ...
]
})
export class HelloComponent {
// ...
}
Собственный - стили из основного HTML не распространяются на компонент. Стили, определенные в декораторе @Component этого компонента, относятся только к этому компоненту. Обратитесь к этому Просмотр инкапсуляции.
Этого не должно происходить. Какую ошибку вы получаете в консоли браузера, если возможно, поделитесь своим кодом?
А, похоже, это не поддерживается в последней версии firefox ... TypeError: hostEl.createShadowRoot не является функцией. Есть ли другой способ добиться этого?
Этот подход сработал для меня, другого подхода я не нашел.
У меня такая же проблема. Вы решили эту проблему?
Используйте ---> инкапсуляция: ViewEncapsulation.ShadowDom
При такой попытке компонент вообще не отображает, какие-нибудь идеи?