如何在Angular共享模块中导入ng-bootstrap并解决样式冲突？

我明白你遇到的痛点了——ng-bootstrap的全局样式确实很容易污染宿主应用，哪怕用了组件封装也没用，因为那些样式本来就是挂载在全局作用域的。下面给你几个靠谱的解决方案，一步步帮你搞定样式隔离问题：

1. 只引入组件依赖的ng-bootstrap样式，拒绝全量导入 #

通常大家会直接全量引入ng-bootstrap的样式文件，比如：

@import "~@ng-bootstrap/ng-bootstrap";

但这会把所有ng-bootstrap的全局样式一股脑塞进项目里，自然会污染宿主应用。你可以改成只引入当前共享组件用到的组件样式：

// 比如你的组件只用了NgbModal和NgbButton
@import "~@ng-bootstrap/ng-bootstrap/scss/modal";
@import "~@ng-bootstrap/ng-bootstrap/scss/button";

这样能大幅减少不必要的全局样式，缩小污染范围。你可以在node_modules/@ng-bootstrap/ng-bootstrap/scss/路径下找到每个组件对应的样式文件。

2. 用CSS命名空间强制隔离样式 #

给你的共享组件根元素加一个独特的类名（比如app-testcomponent-container），然后把所有ng-bootstrap相关样式嵌套在这个类下面：

.app-testcomponent-container {
  // 把用到的ng-bootstrap样式都嵌套在这里
  @import "~@ng-bootstrap/ng-bootstrap/scss/modal";
  @import "~@ng-bootstrap/ng-bootstrap/scss/button";

  // 你自己的组件样式也可以写在这里
  .custom-btn {
    margin: 10px;
  }
}

这样处理后，ng-bootstrap的所有样式选择器都会自动带上app-testcomponent-container前缀，只会作用在你的组件内部，完全不会影响宿主应用的全局样式。

3. 改用Shadow DOM实现完全隔离 #

你之前用的ViewEncapsulation.Native已经被废弃了，现在官方推荐用ViewEncapsulation.ShadowDom——它会创建一个完全独立的DOM树，内部样式和外部样式完全隔离：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-testcomponent',
  templateUrl: './testcomponent.component.html',
  styleUrls: ['./testcomponent.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom // 替换成ShadowDom
})
export class TestcomponentComponent {}

注意：Shadow DOM对旧浏览器（比如IE）支持不好，但主流浏览器（Chrome、Firefox、Edge）都已经完美支持。如果你的宿主应用需要兼容旧环境，可以结合前面的命名空间方法一起使用。

4. 用PostCSS自动给样式加前缀 #

如果手动嵌套样式太麻烦，可以用PostCSS的postcss-prefixer插件，自动给所有ng-bootstrap的样式选择器加上你指定的前缀。只需要在项目中配置PostCSS：

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-prefixer')({
      prefix: 'app-testcomponent-',
      ignore: [/^body/, /^html/] // 忽略全局根元素选择器
    })
  ]
};

这样不用手动修改样式文件，就能自动实现样式隔离。

• 尽量避免在共享组件中使用.btn、.card这类通用类名，即使隔离了也容易和宿主应用的样式冲突，改用更具体的类名（比如app-testcomponent-btn）。
• 如果你的共享组件用到了ng-bootstrap的服务（比如NgbModal），要在共享模块中用forRoot()方式提供，避免在宿主应用中重复注册导致冲突。

内容的提问来源于stack exchange，提问作者mbk