通過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批注。