css - Angular 2 外部样式没有内联到标题

Question

我在 typescript 中有这个组件定义:

import {Component, ViewEncapsulation} from 'angular2/core';

@Component({
    selector: 'my-app',
    templateUrl: '/views/sandbox.html',
    styleUrls: ['/styles/sandbox.css'],
    styles: [`.wow { background-color: red; }`],
    encapsulation: ViewEncapsulation.Emulated
})
export class SandBox { }

根据这篇文章:http://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html样式部分和外部样式表中的样式都应按 Angular 内联到标题中。

不幸的是，第二个没有被注入(inject)，angular 只注入(inject)样式部分中的那个。

我试过从浏览器访问/styles/sandbox.css，没问题。 Angular 也能够访问/views/sandbox.html，所以我不知道为什么它没有发生。

我正在使用:“angular2”:“2.0.0-beta.2”(最新 beta AFAIK)

Answer 1

我做了一些测试，奇怪的是 sandbox.css 的样式仅适用于在 styleUrls 属性中使用相对路径的情况:

@Component({
  selector: 'my-app',
  templateUrl: '/views/sandbox.html',
  styleUrls: ['../styles/sandbox.css'],
  styles: [`.wow { background-color: red; }`],
  encapsulation: ViewEncapsulation.Emulated
})
export class AppComponent {
  constructor() {
  }
}

编辑

查看源代码后，Angular2 阻止了 styleUrls 使用绝对路径。看到这一行:

• https://github.com/angular/angular/blob/master/modules/angular2/src/compiler/style_url_resolver.ts#L12

  export function isStyleUrlResolvable(url: string): boolean {
    if (isBlank(url) || url.length === 0 || url[0] == '/') return false; // <-----
    var schemeMatch = RegExpWrapper.firstMatch(_urlWithSchemaRe, url);
    return isBlank(schemeMatch) || schemeMatch[1] == 'package' || schemeMatch[1] == 'asset';
  }
  

希望对你有帮助，蒂埃里