css – Angular 2外部样式不会内联到标题

我在打字稿中有这个组件定义：

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
样式部分和外部样式表中的样式都应按角度内联到标题中.

不幸的是,第二个没有被注入,角度仅注入样式部分中的一个.

我试过从浏览器访问/styles/sandBox.css,没关系. Angular也可以访问/views/sandBox.html,所以我不知道它为什么没有发生.

我正在使用：“angular2”：“2.0.0-beta.2”(最新测试版AFAIK)

解决方法

我在sandBox.css中做了一些测试和奇怪的样式,只有在styleUrls属性中使用相对路径时才适用：

@Component({
  selector: 'my-app',styleUrls: ['../styles/sandBox.css'],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';
}

希望它能帮到你,蒂埃里

css – Angular 2外部样式不会内联到标题

解决方法

相关文章