将外部 CSS 加载到组件中

问题描述

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?

推荐答案

另见 https://angular.io/docs/ts/latest/guide/component-styles.html

查看封装

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

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/en-US/docs/Web/CSS/::slotted
• 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

无论封装是 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).

注意

shadow piercing CSS 组合器类似于 shadow DOM 规范中的组合器，它们在很长一段时间内已被弃用.

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

使用 default 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 使用 Chrome 的 shadow 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 并且浏览器具有原生 shadow 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 加载到组件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！