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

这里是related issue

Answer 1

如果在encapsulation设置为本机的组件中使用第三方组件，则全局样式将不适用于该第三方组件。例如。如果您在自己的组件内使用第三方组件ngb-modal-window，假设说app-my-own-component的封装设置为native，则全局样式将不适用于ngb-modal-window，因为它将位于影子根（of父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
  }
])

无论您要引导模块的文件名是什么，都必须在main.ts中导入ViewEncapsulation。

如何在Angular中更改第三方组件的封装？

1 个答案: