Question

我正在开这篇文章因为我对CSS Angular2 Components有疑问。

基本上，我买了一个模板，我将它传递给Angular2中的组件。在原始模板中，当向下滚动页面时标题被卡住，这种行为是通过名为Sticky-kit.js的库完成的，该库添加了一个＆＃34; is_stuck＆＃34;在检测到滚动时，将类添加到html标记，在本例中为标记标记。在模板中，html标头标签位于带有＆＃34; main-wrapper＆＃34;的div内。只有宽度为100％的类。在原始模板中一切正常。

当我将标题传递给组件并运行应用程序时，库sticky-kit.js工作正常，因为添加了适当的＆＃34; is_stuck＆＃34;但是尽管上课，但是标题并没有被卡住。图书馆寻找一个班级＆＃34; .topbar＆＃34;在html中，当它找到相应的元素时，它会将＆＃34; is_stuck＆＃34;类。

我想弄清楚为什么会这样。

我做了一些测试，其中一个将标题代码放在组件外面（＆＃34; main-wrapper＆＃34; 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>

我认为这种行为的发生是因为组件封装，我不想把标题代码放在标题组件之外。

有人会帮忙吗？

谢谢！

Answer 1

好的，我找到了自己问题的答案。我花了好几个小时试图解决问题。

我唯一需要做的就是在标头的父节点中使用组件的主机元数据，并在标头组件中使用：host应用css规则。

令人印象深刻的是，一个小问题需要几个小时才能解决。

感谢所有阅读我问题的人。

Angular2中的组件CSS行为

1 个答案: