[英]How to style a sibling component in Angular2?
I have a search component containing a logo, a searchbar and a routeroutlet. 我有一个包含徽标,搜索栏和routeroutlet的搜索组件。 The execution of a search navigates to the resultlist, which is the pseudo html outlined here:
搜索的执行导航到结果列表,这是此处概述的伪html:
<search>
<logo></logo>
<searchbar></searchbar>
<result-list></result-list>
</search>
I like to style logo and searchbar differently on the results page so I tried to select the logo with :host >>> logo
and the /deep/
alternative from the result-list
component. 我希望在结果页面上设置徽标和搜索栏的样式不同,因此我尝试使用
:host >>> logo
和/deep/
替代方法从result-list
组件中选择徽标。 That doesn't work. 那不行 Is there a way to select siblings?
有没有办法选择兄弟姐妹?
Here a small plnkr to demonstrate the problem. 这里有一个小的plnkr来演示问题。 http://plnkr.co/edit/Q0CLjcsftbqe0kHKrKks?p=preview Here I would like to style from
resultlist
the logo
and the searchbar
to be black. http://plnkr.co/edit/Q0CLjcsftbqe0kHKrKks?p=preview在这里,我想从风格
resultlist
的logo
和searchbar
为黑色。
A Similar solution to the one from Jens Habegger using :host-context(myCssClass)
and a conditional. 与Jens Habegger的解决方案类似的解决方案,它使用
:host-context(myCssClass)
和一个有条件的解决方案。 The style needs to be added to the logo
and the searchbar
component. 样式需要添加到
logo
和搜索searchbar
组件中。
<search>
<logo [class.myCssClass]="isSearchResultList"></logo>
<searchbar [class.myCssClass]="isSearchResultList"></searchbar>
<result-list></result-list>
</search>
:host-context(.myCssClass) {
color: black;
}
What you are attempting is basically sharing global application state isSearchResultList: boolean
across multiple components. 您尝试的基本上是在多个组件之间共享全局应用程序状态
isSearchResultList: boolean
。
The obvious naive solution would be to hold the state at the respective shared parent component, and set it based on the current router-outlet. 显而易见的幼稚解决方案是将状态保留在相应的共享父组件上,然后根据当前路由器出口对其进行设置。
<search>
<logo [isSearchResultList]="isSearchResultList"></logo>
<searchbar [isSearchResultList]="isSearchResultList"></searchbar>
<result-list></result-list>
</search>
You can use services for communication between components and ngClass for dynamic styling. 您可以将服务用于组件之间的通信,而可以使用ngClass进行动态样式化。
notification.service.ts 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];
}
}
When sibling component run send a message. 当同级组件运行时,发送一条消息。
bar.component.ts bar.component.ts
import { NotificationService } from 'notification.service';
....
ngOnInit() {
NotificationService.get('barcomponent').emit(true);
}
ngOnDestroy() {
NotificationService.get('barcomponent').emit(false);
}
...
Listen to incoming messages from your component. 听取来自组件的传入消息。
foo.component.ts foo.component.ts
import { NotificationService } from 'notification.service';
....
ngOnInit() {
NotificationService.get('barcomponent').subscribe(value => {
this.activateStyle = value;
});
}
....
You can apply any class via ngClass 您可以通过ngClass应用任何类
foo.component.html foo.component.html
....
<div [ngClass]="{'my-css-class':activateStyle}">
...
</div>
....
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.