CSS Angular2コンポーネントに相対的な疑問があるため、この投稿を開きます。コンポーネントAngular2でのCSSの動作
基本的には、テンプレートを購入しました。これをAngular2のコンポーネントに渡しています。元のテンプレートでは、ページをスクロールダウンするときにヘッダーがスタックされます。この動作は、スクロールが検出されたときに、HTMLタグ（この場合はヘッダータグ）に "is_stuck"クラスを追加するSticky-kit.jsというライブラリーを使用して行われます。テンプレートでは、htmlヘッダータグは、幅が100％の「main-wrapper」クラスのdiv内にあります。すべてが元のテンプレートで正常に動作します。
コンポーネントにヘッダーを渡してアプリケーションを実行すると、適切な "is_stuck"クラスが追加されるので、ライブラリsticky-kit.jsはうまく動作しますが、クラスにもかかわらずヘッダーはスタックしません。ライブラリは、HTML内のクラス ".topbar"を探し、対応する要素を見つけると、 "is_stuck"クラスを連結します。
私はこれがなぜ起こっているのか理解しようとしています。
私はいくつかのテストを行いました。そのうちの1つは、元のテンプレート構造としてコンポーネント（「main-wrapper」divの息子）の外側にヘッダーコードを置いていましたが、うまく動作します。それはもはや動作しません。元のテンプレートでは、ヘッダーの親は：
<div class="main-wrapper"></div>
ですが、ヘッダーの親はコンポーネントそのものです。
これは私が実装しています構造体である：
<div id="main-wrapper">
<app-header></app-header>
<app-menu></app-menu>
<div class="page-wrapper">...</div>
</div>
と、私は次のようにヘッダーを動けなくすることができます
<div id="main-wrapper">
<header>code here</header> <----------
<app-menu></app-menu>
<div class="page-wrapper">...</div>
</div>
私は部品封止するので、この動作が起こることを考えて、私ていますヘッダーコードをヘッダーコンポーネントの外に置く必要はありません。
誰かに助けがありますか？
ありがとうございます！