Угловое 2 внешний стиль не получает встраиваются в заголовок

Question

У меня есть это определение компонента в машинописи:

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 из браузера, это нормально. Угловая также имеет доступ к /views/sandbox.html, поэтому я понятия не имею, почему этого не происходит.

Я использую: «angular2»: «2.0.0-beta.2» (последняя бета-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'; 
  } 
  

Надеется, что это помогает, Тьерри

Answer 2

Лучшим способ исправить это использовать другой файл CSS для компонента и добавить его в список StyleUrls. Очиститель и будет масштабироваться по мере роста компонентов.

Answer 3

Вы можете использовать системный загрузчик зависимостей systemjs и commonjs, загружать шаблоны, стили и другие файлы.

в CommonJS moduleId: module.id в systemJs __moduleName

import {Component} from '@angular/core'; 

@Component({ 

moduleId:module.id, 
selector: "exf-header", 
templateUrl: "header.html", 
styleUrls:['header.css'] 

}) 

export class HeaderComponent { 

}