通过Angular2中的服务将CSS添加到组件中，可以吗？

Question

我有一个包含5张图片的A组件。 在此CSS类别的帮助下，只有1张图片具有颜色并且可以单击，其他4张图片为灰色

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

并且不可点击。

如果单击第一张图片，则将组件更改为component B （ A消失了，因为它是单独的组件，而不是子组件或父组件），在新的第二个component B中进行了一些操作，然后单击按钮，返回到component A 那里的所有内容都保持不变，但是我想使2张图片不是灰色（因此从图片2中删除/更改此类not_opened）并使其可单击，然后，如果我单击图片2，我将转到第三component C ，然后返回至第三部分图片现在不是灰色且不可点击，依此类推...

我该怎么做？ 首先想到的是制作4个不同的组件，每个组件都有自己的CSS样式表，但也许还有另一种方法？。 你能给我一些建议吗？

Answer 1

首先，我建议您在项目中引入视图模型概念。 视图模型包含有关如何渲染特定模型的信息。 在您的情况下，可以在组件A和B之间传递类似Array<ImageViewModel>类的东西。 如果发现适合您的情况，则可以通过某些服务传递此数据，或者可以使用父组件，例如：

父组件模板：

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

父组件代码：

.... {
    images: Array<ImageViewModel> = [];
    active: string = "a";

    constructor(private _service: ImageService) {
        // Lets imagine that service returns array of image urls.
        this._service.fetchImages().subscribe((urls) => {
            this.images = urls.map(url => ({src: url, disabled: true}));
            if (this.images.length > 0) {
                this.images[0].disabled = false;  
            }
        });
    }

    handleImageSelected(image: ImageViewModel) {
        this.active = "b";
        console.log("Image selected", image); 
    }

    handleSettingsEditCompleted() {
        this.active = "a";
    }
}

而ImageViewModel是这样的：

interface ImageViewModel {
    src: string;
    disabled: boolean;
}

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

ComponentA模板：

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

ComponentA样式：

.not-opened {
    filter: grayscale(85%); // Why do you use -webkit version only? 
    -webkit-filter: grayscale(85%);
}        

ComponentA代码：

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

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

如果@Input ， @Output阅读Angular文档中的@Input和@Output批注。