将外部CSS加载到组件中 [英] Load external CSS into component

问题描述

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?

Is there any way to load the external CSS in an Angular 2 Component?

推荐答案

另请参见 查看封装

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

To allow external styles to affect the content of components you can change view encapsulation (that's what prevents styles to "bleed into" components).

@Component({
    selector: 'some-component',
    template: '<div></div>',
    styleUrls: [
        'http://example.com/external.css',
        'app/local.css'
    ], 
    encapsulation: ViewEncapsulation.None, 
})
export class SomeComponent {}

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

View encapsulation fulfills a purpose. The better way is to add styles directly to the component they should affect. ViewEncapsulation is set per component and may come handy in some situations.

阴影穿孔"

您还可以使用阴影穿孔CSS组合器::ng-deep(不推荐使用>>>和/deep/)来构建跨越组件边界的选择器，例如

You can also use shadow piercing CSS combinator ::ng-deep (>>> and /deep/ are deprecated) to build selectors that cross component boundaries like

:host ::ng-deep .ng-invalid {
  border-bottom: solid 3px red;
}

• 更新 现在，所有新浏览器都支持::slotted，并且可以与`ViewEncapsulation.ShadowDom
  一起使用. https://developer.mozilla.org/zh-CN/docs/Web/CSS/::开槽
• update ::slotted is now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom
  https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

可以为当前组件中所有带有类ng-invalid的标签设置样式，或者为任何后代带有红色下划线的样式设置，无论封装是None还是Emulated. /deep/是否可以与Native一起使用取决于浏览器的支持(据我所知，任何浏览器都不再支持此功能.)

which styles all tags with a class ng-invalid in the current component or any descendant with a red underline no matter if encapsulation is None or Emulated. It depends on browser support whether /deep/ works with Native (as far as I know this is not supported by any browser anymore).

注意

阴影穿孔CSS组合器与阴影DOM规范中的组合器类似，已有相当长的一段时间不推荐使用.

The shadow piercing CSS combinators are similar to the ones from the shadow DOM spec where they are deprecated since quite a while.

使用默认和ViewEncapsulation.Emulated会使用Angulars自己的/deep/和::shadow实现，即使Chrome删除了本机支持，它们也将起作用.

With the default ViewEncapsulation.Emulated Angulars own /deep/ and ::shadow implementation are used and they will work even when Chrome removes native support.

在ViewEncapsulation.Native中，Angular使用Chromes阴影DOM CSS组合器(无论如何AFAIK始终只有Chrome支持它们).如果Chrome最终将其删除，那么它们也将无法在Angular中运行(同样也是ViewEncapsulation.Native.)

With ViewEncapsulation.Native Angular uses Chromes shadow DOM CSS combinators (only Chrome supported them at all anyway AFAIK). If Chrome finally removes them, then they won't work in Angular as well (again ViewEncapsulation.Native only).

全局样式

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

Styles added globally (index.html) don't consider component boundaries. Such styles are not rewritten by Angular2 and ViewEncapsulation.Emulated doesn't apply to them. Only if ViewEncapsulation.Native is set and the browser has native shadow DOM support, then global styles can't bleed in.

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

这篇关于将外部CSS加载到组件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！