Question

我有一个包含徽标，搜索栏和路由器插件的搜索组件。执行搜索会导航到结果列表，这是此处概述的伪html：

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

我喜欢在结果页面上对徽标和搜索栏进行不同的设置，因此我尝试使用:host >>> logo和/deep/组件中的result-list替代选择徽标。这不起作用。有没有办法选择兄弟姐妹？

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

Answer 1

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

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

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

Answer 2

您正在尝试的是基本上跨多个组件共享全局应用程序状态isSearchResultList: boolean。

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

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

Answer 3

您可以使用服务进行组件之间的通信，并使用ngClass进行动态样式化。

notification.service.ts

import {Injectable, EventEmitter} from '@angular/core';

@Injectable()
export class NotificationService {
  private static _emitters: { [ID: string]: EventEmitter<any> } = {};

  static get(ID: string): EventEmitter<any> {
    if (!this._emitters[ID]) {
      this._emitters[ID] = new EventEmitter();
    }
    return this._emitters[ID];
  }
}

当兄弟组件运行时发送消息。

bar.component.ts

import { NotificationService } from 'notification.service';
....
ngOnInit() {
      NotificationService.get('barcomponent').emit(true);
  }
  ngOnDestroy() {
      NotificationService.get('barcomponent').emit(false);
  }
...

收听来自组件的传入消息。

foo.component.ts

import { NotificationService } from 'notification.service';
....
ngOnInit() {
    NotificationService.get('barcomponent').subscribe(value => {
        this.activateStyle = value;
    });
  }
....

您可以通过ngClass

申请任何课程

foo.component.html

....
<div [ngClass]="{'my-css-class':activateStyle}">
  ...
</div>
....

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

3 个答案: