Angular 2 外部样式不会内联到标题 [英] Angular 2 external style doesn't get inlined to header

问题描述

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

I have this component definition in 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 内联到标题中.

According to this article: http://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html both the style in the styles section and in the external stylesheet should be inlined into the header by angular.

不幸的是，第二个没有被注入，angular 只注入了样式部分中的一个.

Unfortunately, the second does not get injected, angular injects only the one in the styles section.

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

I have tried accessing /styles/sandbox.css from browser, it is fine. Angular is also able to access /views/sandbox.html so i have no idea why it is not happening.

我正在使用:angular2":2.0.0-beta.2"(最新测试版 AFAIK)

I am using: "angular2": "2.0.0-beta.2" (latest beta AFAIK)

推荐答案

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

I made some tests and strangely styles from the sandbox.css only applies if you use a relative paths within the styleUrls attribute:

@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 使用绝对路径.看到这一行:

After having a look at the source code, Angular2 prevents from using absolute path for the styleUrls. See this line:

• 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';
}

希望对你有帮助蒂埃里

这篇关于Angular 2 外部样式不会内联到标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！