加载外部CSS样式转变为角2组件 [英] Load external css style into Angular 2 Component

问题描述

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<div></div>',
    styleUrls: [
        'http://domain.com/external.css',
        'app/local.css'
    ]
})
export class AppComponent {}

的 external.css 不加载。反正在角2分载荷外部CSS？

The external.css does not load. Anyway to load external css in Angular 2 Component?

推荐答案

要允许外部风格影响的组件，您可以更改视图封装的内容（这是prevents样式渗入组件）。

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://domain.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样式转变为角2组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！