css - Angular 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 スタイルセクションと外部スタイルシートの両方のスタイルをヘッダーにインライン化する必要があります角度によって。

残念ながら、2 番目は注入されず、angular はスタイル セクションの 1 つだけを注入します。

ブラウザから /styles/sandbox.css にアクセスしてみましたが、問題ありません。Angular は /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 リストに追加することです。よりクリーンで、コンポーネントの成長に合わせてスケーリングします。