グローバルなCSSを使用した子要素のスタイリングAngular 2

Question

私はAngular 2を使い始めています。私はThemeforestの管理用テンプレートをスタイリングに使用しています。私は自分のコンポーネントがindex.htmlで定義されたスタイルをとるようにしたい。これはグローバルでなければならない。問題は、コンポーネントhtmlファイル内の要素がこれらのスタイルを見つけられないということです。何とか親子関係が壊れているためです。ここでは例です：

index.htmlファイルでは、私は以下があります。

... 
<!-- This is my Component --> 
<sidebar-menu></sidebar-menu> 

<!-- This is coded directly on the index.html --> 
<li class="m-t-30"> 
    <a href="#" class="detailed"> 
     <span class="title">Page 1</span> 
     <span class="details">234 notifications</span> 
    </a> 
    <span class="icon-thumbnail "><i class="pg-mail"></i></span> 
</li> 
... 

私<sidebar-menu>コンポーネントは、その上にこれを持っているの.htmlファイルです：

まったく同じです

<li class="m-t-30"> 
    <a href="#" class="detailed"> 
    <span class="title">Page 1</span> 
    <span class="details">234 notifications</span> 
    </a> 
    <span class="icon-thumbnail "><i class="pg-mail"></i></span> 
</li> 

index.htmlファイルにあるものと同じです。だから、私は同じ方法で表示される2つの項目を参照する必要があります。しかし、これは私が見たものである。

明らかに

、スタイリングは、そのコンポーネントのHTML要素のHTMLの両方が同じであっても、壊れています。

コンポーネントの検査タイトル：

第二の要素の検査タイトル：

私は定義しようとしたインスペクタを使用して、私は、コンポーネントのHTMLは、第二の要素と同じスタイリングを使用していないことがわかります私のコンポーネントのencapsulation: ViewEncapsulation.Noneは何もしません。どのようにこれを解決するための任意のアイデアですか？ありがとう！

Answer 1

の方法は、私のコンポーネントのディレクティブが呼び出される方法を変更することでした。通常、次のようにセレクタを定義します。

@Component({ 
    moduleId: module.id, 
    selector: 'sidebar-menu', 
    ... 
}) 

<sidebar-menu></sidebar-menu>を使用して呼び出します。代わりに、私はこのようなセレクタに定義：

@Component({ 
    moduleId: module.id, 
    selector: '[sidebar-menu]', 
    ... 
}) 

をそして、div内ディレクティブとしてliまたはそのことについては、DOM要素を、それを呼び出します。

この方法でも、私はThemeforestテンプレートのスタイリングを使用してコンポーネントを使用できます。通常、私はこのようなものだろうので、私はそれを破ったことを考え出し：

<div class="parent-class"> 
    <div class="child-class"> 
     ... styles applied to ".parent-class.child-class" 
    </div> 
</div> 

を、コンポーネントと、私はこのようなものだ：回避策で

<div class="parent-class"> 
    <sidebar-menu> 
     <div class="child-class"> 
      ... CSS can't find ".parent-class.child-class" anymore, as it has a sidebar-menu element in the middle! 
     </div> 
    </sidebar-menu> 
</div> 

を、あなたはこれで終わる：

<div class="parent-class"> 
    <div class="child-class" sidebar-menu> 
     ... CSS can still find ".parent-class.child-class", all good! 
    </div> 
</div> 

うまくいけば、これは誰かを助けるでしょう。あなたの答えをありがとう！

Answer 2

私は、スタイルメタデータを使用して、特定のコンポーネントに必要なすべてのCSSファイルを追加します。管理テンプレートcssにアクセスできる場合は、コンポーネントへの相対パスで参照できます。例：

@Component({ 
    selector: 'my-selector', 
    template: require('./my-template.html'), 
    styles: [ 
     require('./my-style.css'), 
     require('../some-other-folder/some-other-style.css') 
    ] 
}) 

によりビューのカプセル化には、コンポーネントの中にこのように出血していないため、デフォルト、他のスタイルによってエミュレートされていると、あなたは明示的に、あなたがこのコンポーネントに含まれるようにしたいCSSファイルを宣言しなければなりません。

FYIでは、スタイルをグローバルに公開するもう1つの方法は、外部のCSSファイルにあるスタイルの先頭に:host >>>を追加することです。例：

:host >>> .no-margin { 
    margin: 0; 
} 

（あなたが管理テンプレートを変更することはできません言ったように、このオプションがあなたのために動作しないでしょうが、私は興味がある人々のために、ここでそれを入れています）。このアプローチでは、ではなく、はスタイル配列にスタイルを含める必要があります。

さらに別のタイプのビューカプセル化は、Emulated（デフォルト）、Native、およびNoneです。 https://angular.io/docs/ts/latest/guide/component-styles.html#view-encapsulation

Answer 3

ちょうど「なし」にビューencapulationを設定します。私はこの制限を回避するために管理

@Component({ 
    .... 
    encapsulation: ViewEncapsulation.None 
})