Angular 6中特定组件引入外部样式表的可行性及两组件样式隔离实现

1. 是否可以仅为特定组件而非全局引入外部样式表？ #

绝对可以！Angular的模块化设计天生支持组件级样式隔离，这也是它比很多框架灵活的地方之一。你完全不需要把外部样式表全局引入到angular.json或者index.html里，只给需要的组件单独加载就行，这样既能减少全局样式的冗余，还能避免不同组件之间的样式污染。

2. 在Angular 6应用中有两个组件，需让第一个组件使用bootstrap min.css文件，第二个组件不使用，该如何实现？ #

这里有几种简单靠谱的方法，按推荐程度排序给你：

方法一：通过组件元数据的styleUrls配置（最推荐） #

直接在你需要用bootstrap的第一个组件（比如FirstComponent）的.ts文件里，修改@Component装饰器的styleUrls数组，把bootstrap的样式文件路径加进去：

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

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: [
    './first.component.css', // 组件自身的样式
    '~bootstrap/dist/css/bootstrap.min.css' // 指向node_modules里的bootstrap，Angular 6支持用~快速定位
    // 如果是本地静态文件，就写相对路径比如'../assets/css/bootstrap.min.css'
  ]
})
export class FirstComponent { }

这样Angular会自动只给这个组件加载bootstrap样式，第二个组件因为没配置这个路径，完全不会受到bootstrap的影响。而且Angular默认的样式封装机制（ViewEncapsulation.Emulated）会确保bootstrap的样式只作用于第一个组件的DOM，不会泄露到其他地方。

方法二：在组件本地CSS文件中用@import #

如果你更习惯在组件的CSS文件里统一管理样式，直接在first.component.css的顶部添加导入语句就行：

@import '~bootstrap/dist/css/bootstrap.min.css'; /* npm安装的bootstrap */
/* 本地文件的话用 @import '../assets/css/bootstrap.min.css'; */

/* 下面写你组件自身的样式 */

效果和方法一完全一样，都是只对当前组件生效。

方法三：动态加载（适合特殊场景） #

如果需要根据某些业务条件动态决定是否加载bootstrap（比如用户切换主题时），可以在组件的ngOnInit钩子中手动创建link标签并插入到页面头部：

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

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
  ngOnInit(): void {
    // 先检查是否已经加载过，避免重复添加
    if (!document.querySelector('link[href*="bootstrap.min.css"]')) {
      const bootstrapLink = document.createElement('link');
      bootstrapLink.rel = 'stylesheet';
      bootstrapLink.href = '~bootstrap/dist/css/bootstrap.min.css';
      document.head.appendChild(bootstrapLink);
    }
  }
}

不过这种方法一般用得不多，除非有特殊的动态需求，日常开发用前两种方法就足够了。

需要注意的是，千万不要把bootstrap全局引入到index.html或者angular.json的styles数组里，那样所有组件都会用到，就达不到你要的效果了。

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