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

2023年5月6日 216次阅读

我有一个包含徽标,搜索栏和routeroutlet的搜索组件.执行搜索会导航到结果列表,这是此处概述的伪html：

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

我喜欢在结果页面上对徽标和搜索栏进行不同的设置,因此我尝试选择徽标：host>>> logo和result-listcomponent中的/ deep / alternative.这不起作用.有没有办法选择兄弟姐妹？

这里有一个小plnkr来演示这个问题. http://plnkr.co/edit/Q0CLjcsftbqe0kHKrKks?p=preview在这里,我想从结果列表中选择徽标和searchbarto为黑色.

最佳答案 您正在尝试的是基本上共享全局应用程序状态isSearchResultList：跨多个组件的布尔值.

显而易见的天真解决方案是将状态保持在相应的共享父组件上,并根据当前路由器插座进行设置.

<search>
  <logo [isSearchResultList]="isSearchResultList"></logo>
  <searchbar [isSearchResultList]="isSearchResultList"></searchbar>
  <result-list></result-list>
</search>
点赞