Как изменить инкапсуляцию стороннего компонента в Angular?

Question

Я использую AngularElements с собственной инкапсуляцией, поэтому компоненты bs4 можно использовать в проекте bs3. Пример:

@Component({
  selector: 'app-my-button',
  templateUrl: './my-button.component.html',
  encapsulation: ViewEncapsulation.Native,
  styles: ['@import "~bootstrap/scss/bootstrap.scss";']
})
export class MyButtonComponent {}

Вопрос в том, как изменить инкапсуляцию стороннего компонента, чтобы глобальный css не влиял на него? Дан NgbModalWindow компонент. Как изменить его инкапсуляцию на ViewEncapsulation.Native и применить определенные стили?

Вот связанный вопрос

Answer 1

Если вы используете сторонний компонент внутри компонента, для которого encapsulation установлен в нативный, глобальные стили не будут применяться к этому стороннему компоненту.Например, если вы используете сторонний компонент ngb-modal-window внутри вашего собственного компонента, скажем, app-my-own-component, инкапсуляция которого установлена ​​в native, глобальные стили не будут применяться к ngb-modal-window, потому что он будет находиться внутри теневого корня (родительского элемента app-my-own-component).).

@Component({
  selector: 'app-my-own-component',
  template: '<ngb-modal-window></ngb-modal-window>',
  encapsulation: ViewEncapsulation.Native,
  styles: ['@import "~bootstrap/scss/bootstrap.scss";']
})

Однако добавление стилей в app-my-own-component будет применяться к ngb-modal-window в этом случае.

Еще одна вещь, которую вы можете сделать, это установить encapsulation в ViewEnacpsulation.Native вглобальный уровень, так что все компоненты в вашем приложении будут иметь собственную инкапсуляцию.Вы можете сделать это при начальной загрузке модуля приложения в файле main.ts:

Измените это: platformBrowserDynamic().bootstrapModule(AppModule) на следующее:

platformBrowserDynamic().bootstrapModule(AppModule, [
  {
      defaultEncapsulation: ViewEncapsulation.Native
  }
])

Вам придется импортировать ViewEncapsulation внутри main.где бы ни было имя файла, где вы загружаете свой модуль.