为了账号安全,请及时绑定邮箱和手机立即绑定

将外部CSS加载到组件中

/ 猿问

将外部CSS加载到组件中

慕婉清6462132 2019-10-09 15:45:42

import {Component} from 'angular2/core';


@Component({

    selector: 'my-app',

    template: '<div></div>',

    styleUrls: [

        'http://example.com/external.css',

        'app/local.css'

    ]

})

export class AppComponent {}

在external.css不加载。


有什么办法可以在Angular 2组件中加载外部CSS?


查看完整描述

3 回答

?
侃侃无极

另请参阅https://angular.io/docs/ts/latest/guide/component-styles.html


查看封装


要允许外部样式影响组件的内容,可以更改视图封装(这是防止样式“渗入”组件的原因)。


@Component({

    selector: 'some-component',

    template: '<div></div>',

    styleUrls: [

        'http://example.com/external.css',

        'app/local.css'

    ], 

    encapsulation: ViewEncapsulation.None, 

})

export class SomeComponent {}

视图封装实现了一个目的。更好的方法是将样式直接添加到应影响的组件中。  ViewEncapsulation按组件设置,在某些情况下可能会派上用场。


“阴影穿孔”


您还可以使用阴影穿孔CSS组合器::ng-deep(>>>并且/deep/已弃用)来构建跨组件边界的选择器,例如


:host ::ng-deep .ng-invalid {

  border-bottom: solid 3px red;

}

 ::slotted所有新浏览器现在都支持该更新,并且可以与`ViewEncapsulation.ShadowDom 

https://developer.mozilla.org/en-US/docs/Web/CSS/:slotted

ng-invalid无论封装是None还是封装,它将用当前组件中的类标记所有标签或用红色下划线标记任何后代的样式Emulated。这取决于浏览器是否支持/deep/与工作Native(据我所知,这是没有任何浏览器都支持了)。


注意


影子穿刺CSS组合器与影子DOM规范中的组合器类似,已有相当长的一段时间不推荐使用。


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


使用ViewEncapsulation.NativeAngular时,Chromes阴影DOM CSS组合器(反正AFAIK始终只有Chrome支持它们)。如果Chrome最终将其删除,则它们也将无法在Angular中运行(再次ViewEncapsulation.Native)。


整体风格


全局添加的样式(index.html)不考虑组件边界。Angular2不会重写此类样式,ViewEncapsulation.Emulated并且不适用于它们。仅当ViewEncapsulation.Native设置并且浏览器具有本机阴影DOM支持时,全局样式才能渗入。


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


查看完整回答
反对 回复 2019-10-09
?
FFIVE

首先 - styles/ styleUrls只应用于直接影响模板中元素样式的所有CSS规则。


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


例如,在external.css中,如果有这样的规则div.container { /*some rules*/ },它将变为div.container[_ngcontent-cds-2] { /*some rules*/ }。因此,无论您多么努力使规则成为优先级规则(例如添加!important标签),它都行不通-external.css中的所有选择器都只限于一级属性选择器,只有component元素具有相同的属性属性。这就是angular2将样式限制为仅当前组件的方式。


当然总有解决方法。

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


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


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);

}


查看完整回答
反对 回复 2019-10-09
?
慕桂英4014372

更好的方法已经发布在这里:https : //stackoverflow.com/a/36265072/5219412


你只需要在你的组件的声明补充一点:


@Component({

    ...

    encapsulation: ViewEncapsulation.None,

})

如角度文档中所述:https : //angular.io/guide/component-styles


希望能帮助到你。


查看完整回答
反对 回复 2019-10-09

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信