html - 如何在 Angular2 中设置兄弟组件的样式？

Question

我有一个包含 Logo 、搜索栏和路由器导出的搜索组件。搜索的执行导航到结果列表，这是此处概述的伪 html:

<search>
  <logo></logo>
  <searchbar></searchbar>
  <result-list></result-list>
</search>

我喜欢在结果页面上设置不同样式的 Logo 和搜索栏，因此我尝试选择带有 :host >>> logo 和 /deep/ 的 Logo result-list组件。那是行不通的。有没有办法选择 sibling ？

这里有一个小的 plnkr 来演示这个问题。 http://plnkr.co/edit/Q0CLjcsftbqe0kHKrKks?p=preview在这里，我想将 resultlist 中的 logo 和 searchbar 设置为黑色。

Answer 1

与 Jens Habegger 中的解决方案类似使用 :host-context(myCssClass) 和条件。该样式需要添加到logo 和searchbar 组件。

<search>
  <logo [class.myCssClass]="isSearchResultList"></logo>
  <searchbar [class.myCssClass]="isSearchResultList"></searchbar>
  <result-list></result-list>
</search>

:host-context(.myCssClass) {
  color: black;
 }