将外部CSS样式加载到Angular 2 Component中

::slotted所有新浏览器现在都支持更新,并且可以与`ViewEncapsulation.ShadowDom https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted一起使用

哪些样式的所有标签一类ng-invalid的电流分量或红色任何后代强调不管封装是None或Emulated.这取决于浏览器支持是否/deep/适用Native(据我所知,任何浏览器都不再支持).

注意

阴影穿孔CSS组合器类似于shadow DOM规范中的组合,因为它们已经被弃用了很长一段时间.

使用默认的 ViewEncapsulation.Emulated Angulars自己/deep/和::shadow实现,即使Chrome删除了本机支持,它们也能正常工作.

使用ViewEncapsulation.NativeAngular使用Chromes shadow DOM CSS组合器(只有Chrome支持它们,无论如何AFAIK).如果Chrome最终删除它们,那么它们也不会在Angular中工作(ViewEncapsulation.Native仅限于).

全球风格

全局添加的样式(index.html)不考虑组件边界.Angular2不会重写这些样式,ViewEncapsulation.Emulated也不适用于它们.只有在ViewEncapsulation.Native设置并且浏览器具有本机影子DOM支持的情况下,全局样式才能渗透.

另请参阅此相关问题https://github.com/angular/angular/issues/5390

首先 - styles/ styleUrls只应用于任何直接影响模板元素样式的css规则.

您的external.css未应用于组件的原因是因为当您从external.css中加载这些规则时,styleUrls或者styles在编译时,angular2会将属性选择器等唯一的组件标识符附加到原始选择器.

例如,在您的external.css中,如果存在类似的规则div.container { /*some rules*/ },它将成为div.container[_ngcontent-cds-2] { /*some rules*/ }.因此,无论您如何努力强制您的规则成为优先级规则,例如添加!important标记,它就不会起作用 - 您的external.css中的所有选择器都被限制在属性选择器的一个级别,只有组件元素带有相同的属性.这就是angular2将样式限制为仅当前组件的方式.

当然总有一种解决方法.

这是我的解决方案 - 我将为所有js脚本添加一个外部资源服务,它将SystemJS用于加载AMD或全局,对于所有的css文件,它将使用普通的javascript来创建一个元素并附加它到元素.

这是我的一段代码供您考虑:

loadCSS(url) {
  // Create link
  let link = document.createElement('link');
  link.href = url;
  link.rel = 'stylesheet';
  link.type = 'text/css';
  
  let head = document.getElementsByTagName('head')[0];
  let links = head.getElementsByTagName('link');
  let style = head.getElementsByTagName('style')[0];
  
  // Check if the same style sheet has been loaded already.
  let isLoaded = false;  
  for (var i = 0; i < links.length; i++) {
    var node = links[i];
    if (node.href.indexOf(link.href) > -1) {
      isLoaded = true;
    }
  }
  if (isLoaded) return;
  head.insertBefore(link, style);
}