角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
无论是在款式节和外部的样式表的样式应该内联成角头。

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.

不幸的是，第二没有得到注入，角内喷射只有一个在样式部分。

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

我试图访​​问来自浏览器/styles/sandbox.css，它是好的。角也能，所以我不知道为什么它没有发生访问/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（最新的beta据我所知）

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() {
  }
}

修改

在看看源$ C ​​$ C后，使用绝对路径 styleUrls Angular2 prevents。看到这一行：

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

• <一个href=\"https://github.com/angular/angular/blob/master/modules/angular2/src/compiler/style_url_resolver.ts#L12\" rel=\"nofollow\">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';
}

希望它可以帮助你，
蒂埃里

Hope it helps you, Thierry

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