Angular2特定の要素に関連付けられたスタイルのフックを取得するにはどうすればいいですか

Question

ニュースチッカーの指示を改善するコンポーネントを作成しています（here参照）。代わりに、スタイルの限られた数を渡すのこのようなディレクティブに属性：

<div class="tickerContainer myStyles"> 
    <div ticker [trigger]="'onClick'" [text]="myText" [speed]="15" [padding-right]="0" [size]="40"></div> 
</div> 

私の代わりに側面に沿って、それが使用されているコンポーネントのCSSを要素のスタイルを好むだろう。私は当たっています問題は、私は<ng-content>を経由して、元の<ticker>コンポーネントのスタイルを表示することができますが、私はできないということです

@Component({ 
    selector: 'my-component', 
    template: ` 
    <div class="my-component-class"> 
     <ticker-container> 
     <ticker>{{displayText}}</ticker> 
     </ticker-container> 
    </div> 
    `, 
    styles: [` 
    .my-component-class{ 
     width: 100%; 
    } 
    ticker-container{ 
     width: 50%; 
    } 
    ticker { 
     font-size: 24px; 
     padding: 4px 10px; 
    } 
    `] 
}) 
export class MyComponent { 
    displayText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." 
} 

：

例：基本的にはちょうどあなたがあなたのアプリケーション内の他の要素をだろうと同じように、スタイル生成された要素（最初の要素の後ろの 'tick'に生成された重複要素）にスタイルを適用します。私はコンポーネントジェネレータを介して、:host/::shadow/スタイルコマンドのさまざまな設定を試してみました。

他の要素からすべてのスタイルをコピーする方法が分かっていれば、これを解決できます。それを行う方法はありますか？ ticker-containerとtickerコンポーネントに

Answer 1

、noneにViewEncapsulationを設定します。

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

@Component({ 
    selector: ticker-counter, 
    ... 
    encapsulation: ViewEncapsulation.None 
}) 

これはシャドウDOMので、親スタイルで、これらの要素がそれにトリクルダウンすることができますカプセル化することではない角度教えてくれます。