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行为

回答

相关问题