如何在Angular中更改第三方组件的封装？ [英] How to change encapsulation of 3rd party component in Angular?

问题描述

我将AngularElements与本机封装一起使用，因此bs4组件可以在bs3项目中使用。示例：

I'm using AngularElements with native encapsulation so bs4 components can be used in bs3 project. Example:

@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并应用特定样式？

The question is how to change encapsulation of 3rd party component so that global css doesn't affect it? Given NgbModalWindow component. How to change its encapsulation to ViewEncapsulation.Native and apply particular styles?

这里是相关问题

推荐答案

如果您使用第三方封装 encapsulation 设置为本机，全局样式的组件中的组件将不适用于该第三方组件。
例如如果您在自己的组件内使用第三方组件 ngb-modal-window 可以说 app-my-own-component 封装设置为native的全局样式将不适用于 ngb-modal-window ，因为它将位于父 app的影子根内部-my-own-component ）。

If you use a third party component inside a component whose encapsulation is set to native, global styles wont apply to that third party component. E.g. If you use the third party component ngb-modal-window inside your own component lets say app-my-own-component whose encapsulation is set to native, the global styles wont apply to ngb-modal-window because it will be inside shadow root(of the parent 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 中

However adding styles in app-my-own-component will get applied to ngb-modal-window in this case.

您可以做的另一件事是将 encapsulation 设置为 ViewEnacpsulation.Native 在全局级别，以便应用程序中的所有组件都具有本机封装。您可以在main.ts文件中引导应用程序模块时执行以下操作：

Another thing you can do is set encapsulation to ViewEnacpsulation.Native at global level so that all components in you application will have Native encapsulation. You can do this while bootstrapping your app module in main.ts file:

更改此操作：
platformBrowserDynamic（）。bootstrapModule（AppModule ）
到此：

Change this: platformBrowserDynamic().bootstrapModule(AppModule) to this:

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

您必须在main.ts内导入 ViewEncapsulation ，无论文件名是您引导模块的位置。

You will have to import ViewEncapsulation inside main.ts of whatever the name of the file is where you are bootstrapping your module.

这篇关于如何在Angular中更改第三方组件的封装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！