Как отключить инкапсуляцию представления в стороннем компоненте в angular2/4?

Я хочу переопределить стили для компонента с открытым исходным кодом, который я использую, но единственный способ отключить инкапсуляцию представления, который я могу найти, - это декоратор компонента. Конечно, использование стороннего модуля означает, что я не могу редактировать исходный код для него. Как еще это можно было сделать?

изменить

Я знаю о предложении /deep/styles. Что я хочу сделать, так это переопределить стили таблиц в стороннем компоненте со стилем из bootstrap 4. К пользовательскому компоненту применен класс .table, но с инкапсуляцией представления он недоступен для классов boostrap 4.

Я просто хочу знать, есть ли способ полностью отключить инкапсуляцию представления без необходимости разветвления кода и добавления значения свойства декоратора компонента «encapsulation: ViewEncapsulation.None» для моего собственного использования.


angular css angular2viewencapsulation
person Gabriel Alack    schedule 27.04.2017    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете использовать селектор /deep/css для переопределения стиля css вложенных компонентов. Например, компонент использует сторонний компонент, который создает раскрывающийся список с классом «.dropdown».

Компонент html:

 <ss-multiselect-dropdown #multipleSelect
                     [settings]="settings"
                     [options]="options"
                     [(ngModel)]="selectedOptions"
                     (ngModelChange)="onSelectChange($event)"></ss-multiselect-dropdown>

и вот css компонента, который переопределяет раскрывающийся класс.

/deep/ .dropdown {
  display: inline-block;
  width: 100%;
}
person Julia Passynkova    schedule 27.04.2017
comment
Да. Хорошее предложение для многих целей, но моя ситуация немного отличается. Смотрите мою правку. - person Gabriel Alack; 27.04.2017
comment
platformBrowserDynamic().bootstrapModule(AppModule, {defaultEncapsulation: ViewEncapsulation.None}); - person Julia Passynkova; 27.04.2017
comment
Обновление: /deep/ устарело, как и сейчас. Так что, возможно, требуется другое решение - person pravin; 06.02.2018