なぜangle2スタイルに文字列の代わりに文字列の配列があるのですか？

Question

私はAngular2を学ぼうとしていますが、私はコンポーネントスタイルについて少し混乱しています。コンポーネントデコレータでコンポーネントに適用するスタイルを指定できますが、これを行うには2通りの方法があります：

1 - 私たちは、複数のCSSファイル

@Component({ 
    selector: 'users-list', 
    templateUrl: 'app/users-list.template.html', 
    styleUrls: ['style1.css', 'style2.css'] 
}) 

2-ている場合がありますので、我々は我々がスタイルで私たちのスタイルを書くことができ、これは私のロジックですstyleUrls文字列の配列であるプロパティにCSSファイルを指定することができますプロパティも文字列の配列ですが、これは私が混乱しているところです！なぜ私は、スタイルプロパティは文字列の配列ですか？なぜそれが単なる文字列ではないのですか？

@Component({ 
    selector: 'users-list', 
    templateUrl: 'app/users-list.template.html', 
    styles: [ 
     ` 
      .glyphicon{ 
       cursor: pointer; 
      } 
     ` 
    ] 
}) 

Angular2の公式文書では、なぜ1つの文字列の代わりに文字列を配置するのか、誰も私を説明することができます！

Answer 1

を使用することができます。一見すると、これは役に立たないかもしれませんが、コンポーネントにハードコードされていない複数のスタイルを混在させたい場合に便利です。たとえば：

import commonStyles from "./commonStyles"; 

@Component({ 
    selector: 'users-list', 
    templateUrl: 'app/users-list.template.html', 
    styles: [ 
     ".glyphicon { cursor: pointer; }", 
     commonStyles.background // This string of style rules gets applied too! 
    ] 
}) 

EDIT：コメントでの質問に答えるために：この場合には

commonStylesはちょうどCSSの文字列を含む通常のJavaScriptオブジェクトのようになります。

export default { 
    background: "div { background-color: #00FF00; }" 
}; 

とANこのようにすることの利点は、アプリケーションが追加のHTTPリクエストを作成する必要がないことです。つまり、styleUrlsを取得する必要があります。これは具体的な違いになります）。

Answer 2

あなたが例えばstyles配列で提供CSS文字列のすべての組み合わせにおけるコンポーネントに適用される共有スタイルファイル

@Component({ 
    selector: 'users-list', 
    templateUrl: 'app/users-list.template.html', 
    styleUrls: ['users-list.css', 'common-theme.css'] 
}) 

Answer 3

したがって、配列項目が2つ以上ある場合は、特にファイルを反復処理することができます。

彼らは文字列を使用した場合、彼らは'style1.css style2.css'

を使用してプログラムの代わりの方法です。彼らは1つの機能を追加します。

1. スプリット刺します。出力配列
2. ファイルを取得するために配列を反復処理します。

彼らはプロセスを短縮し、はるかに高速アプリケーションを作るために、配列を使用していました。あなたがangle2を使って小さなアプリを作っているなら。それはあなたを傷つけることはありません。しかし、あなたが何百万というデータを扱っているならば。それはあまり助けても大したことではありません。少なくとも。

よろしくお願いいたします。