Angular2中的組件CSS行爲

我打開這篇文章是因爲我對CSS Angular2組件有一定的懷疑。Angular2中的組件CSS行爲

基本上，我買了一個模板，我將它傳遞給Angular2中的組件。在原始模板中，當向下滾動頁面時，頁眉被卡住，並且這種行爲是通過名爲Sticky-kit.js的庫完成的，該庫向html標籤添加了「is_stuck」類，在這種情況下，標題標籤在檢測到滾動時。在模板中，html標頭標籤位於div的「main-wrapper」類中，寬度僅爲100％。一切工作正常在原來的模板。

當我將標題傳遞給組件並運行應用程序時，庫sticky-kit.js工作正常，因爲添加了相應的「is_stuck」類，但儘管類中的標頭沒有卡住。該庫在html中查找類「.topbar」，當它找到相應的元素時，它將連接「is_stuck」類。

我想弄清楚爲什麼會發生這種情況。

我做了一些測試，其中一個是把頭部代碼放在組件的外面（「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>

我想，這種行爲發生，因爲該組件封裝和我不想將標題代碼放在標題組件之外。

會有人幫忙嗎？

謝謝！

來源

2017-09-26 Christiang

好吧，我找到了自己問題的答案。我花了幾個小時試圖解決問題。

我需要做的唯一事情就是在頭的父項中使用組件的主機元數據，並在頭組件中使用：host。

令人印象深刻的是，一個小問題需要幾個小時才能解決。

感謝大家閱讀我的問題。

來源

2017-09-27 05:08:12 Christiang

Angular2中的組件CSS行爲

回答

相關問題