javascript - 在 Angular2 中通过服务向组件添加 css，这可能吗？

Question

我有一个包含 5 张图片的组件 A。只有 1 张图片有颜色并且可以点击，其他 4 张在这个 css 类的帮助下是灰色的

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

并且不可点击。

如果我点击第一张图片，我将组件更改为 component B(A 消失，因为它是单独的组件，而不是子组件or parent) ，在新的第二个 component B 中做一些操作，然后我点击按钮，返回到 component A。那里的一切都保持不变，但我想让 2 图片不是灰色的(所以从图片 2 中删除/更改此类 not_opened)并使其可点击，然后如果我点击图片 2，我会转到第三个 component C 然后返回，第三张图片现在不是灰色且不可点击等等...

我怎么能做出这样的东西？首先想到的是制作 4 个不同的组件，每个组件都有自己的 css 样式表，但也许还有另一种方法？..也许以某种方式在服务的帮助下？你能给我一些建议吗？

Answer 1

首先，我建议您在元素中引入 View 模型概念。 View 模型包含有关如何呈现特定模型的信息。在您的情况下，您可以传递类似 Array<ImageViewModel> 的内容组件之间A和 B .如果你觉得适合你的情况，你可以通过一些服务传递这些数据，或者你可以使用父组件，例如:

父组件模板:

<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%);
}        

组件A代码:

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

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

了解 @Input和 @Output如果不清楚，请在 Angular 文档中添加注释。