0

我正在使用带有原生封装的 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 {}

问题是如何更改 3rd 方组件的封装，以便全局 css 不会影响它？给定NgbModalWindow组件。如何将其封装更改为 ViewEncapsulation.Native 并应用特定样式？

这是相关问题

4

1 回答 1

0

如果您在设置为原生的组件内使用第三方组件，encapsulation则全局样式不会应用于该第三方组件。ngb-modal-window例如，如果您在自己的组件中使用第三方组件，可以说app-my-own-component谁的封装设置为本地，全局样式将不适用，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.ts 中导入引导模块的文件名。

于 2019-04-17T19:59:36.763 回答