Question

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

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

不可点击。

如果我点击第一张图片，我将组件更改为component B（A消失，因为它是单独的组件，而不是子组件或父组件），请执行一些操作新的第二个component B，然后点击按钮，返回component A。那里的一切都保持不变，但是我想让2张图片不是灰色的（所以删除/更改这个类没有从图片2中打开）并使其可点击，然后如果我点击图片2我转到第三个component C然后后面和第三张图片现在不是灰色和可点击的等等......

我怎么能这样做？首先想到的是制作4个不同的组件，每个组件都有自己的css样式表，但也许有另一种方式？也许在某种程度上帮助服务？你能告诉我什么吗？

Answer 1

首先，我建议您向项目介绍视图模型概念。视图模型包含有关如何呈现特定模型的信息。在您的情况下，您可以在组件for dia in all diagrams: for diaobj in dia.diagramobjects: obj = rep.GetElementByID(diaObj.ElementID) if obj.Type == "Note" and obj.Stereotype == "files": con = obj.connectors.getAt(0) # assume there's only one connected ident = con.clientId if ident == obj.ElementId: ident = obj.sourceId fObj = rep.GetElementByID(ident) # element connected to the note # parse fObj's files and write them as string to obj's Note attribute和Array<ImageViewModel>之间传递A之类的内容。如果您发现它适合您的情况，您可以通过某些服务传递此数据，或者您可以使用父组件，例如：

父组件模板：

父组件代码：

<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指令来更改图像可用性。

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

如果某些内容不明确，请阅读Angular文档中的... { @Output() onImageSelected = new EventEmitter<ImageViewModel>(); @Input() images: Array<ImageViewModel> = []; handleImageSelected(image: ImageViewModel) { this.images[1].disabled = false; this.onImageSelected.emit(image); } }和@Input注释。

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

1 个答案: