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

问题描述

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

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，这是罚款。 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 -beta2（latest beta 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 p>
  
  

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

，
Thierry

Hope it helps you, Thierry

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