Javascript 通过Angular2中的服务将css添加到组件中，是否可能？

我有一个带有5张图片的组件

A

。在这个css类的帮助下，只有一张图片是彩色的，可以点击，另外四张是灰色的

.not_opened{
  -webkit-filter: grayscale(85%);
}

和是不可点击的

如果单击第一张图片，我将组件更改为

组件
B
（
A
消失，因为它是单独的组件，而不是子组件或父组件），在新的第二张
组件B
中执行一些操作，然后单击按钮，返回到
组件A
。一切都是一样的，但我想让2张图片不是灰色的（因此删除/更改图片2中未打开的类）并使其可单击，然后如果我单击图片2，我将转到第三张
组件C
，然后返回，第三张图片现在不是灰色的，可单击，依此类推

我怎么能做这样的东西？
第一个想法是制作4个不同的组件，每个组件都有自己的css样式表，但也许还有其他方法？。。
也许在服务的帮助下？
您能给我一些建议吗？
首先，我建议您在项目中引入视图模型的概念。视图模型包含有关如何渲染特定模型的信息。在本例中，您可以在组件
A
和
B
之间传递类似
Array
的内容。如果您认为该数据适合您的情况，您可以通过某些服务传递该数据，或者您可以使用父组件，例如：

父组件模板：

<component-a [images]="images" *ngIf="active === 'a'" (onImageSelected)="handleImageSelected($event)"></component-a>
<component-b [images]="images" *ngIf="active === 'b'" (onSettingsEditCompleted)="handleSettingsEditCompleted()"></component-b>

<img *ngFor="let image of images" [src]="image.src" [ngClass]="{'not-opened': image.disabled}" (click)='!image.disabled && handleImageSelected(image)'/>

现在在
componentA
中，使用
[ngClass]
指令更改图像可用性

组件模板：

<component-a [images]="images" *ngIf="active === 'a'" (onImageSelected)="handleImageSelected($event)"></component-a>
<component-b [images]="images" *ngIf="active === 'b'" (onSettingsEditCompleted)="handleSettingsEditCompleted()"></component-b>

<img *ngFor="let image of images" [src]="image.src" [ngClass]="{'not-opened': image.disabled}" (click)='!image.disabled && handleImageSelected(image)'/>

组件A代码：

... {
   @Output()
   onImageSelected = new EventEmitter<ImageViewModel>();
   @Input() 
   images: Array<ImageViewModel> = [];   

   handleImageSelected(image: ImageViewModel) {
       this.images[1].disabled = false;
       this.onImageSelected.emit(image);
   }
}

。。。{
@输出（）
onImageSelected=新的EventEmitter（）；
@输入（）
图像：数组=[]；
handleImageSelected（图像：ImageViewModel）{
this.images[1]。disabled=false；
此.onImageSelected.emit（图像）；
}
}

如果有不清楚的地方，请阅读角度文档中的
@Input
和
@Output
注释。
使用ng类应用条件类：
... {
   @Output()
   onImageSelected = new EventEmitter<ImageViewModel>();
   @Input() 
   images: Array<ImageViewModel> = [];   

   handleImageSelected(image: ImageViewModel) {
       this.images[1].disabled = false;
       this.onImageSelected.emit(image);
   }
}