Question

我不知道如何仅为部分组件中的点击项设置可见类。所以，我是temaplate：

<div class="photo-container" *ngFor ="let i of modalImages; let index = index">
       <div [ngClass]="ImageContainer">
           <i class="ionicons ion-ios-close remove-icon" (click)="deleteImageEvent(index)"></i>
           <img (click)="onImageClickEvent(index)" src="{{ i.thumb }}">
       </div>
</div>

在组件I中初始化它们..

export class ImageModal implements OnInit, AfterViewInit {
    @ViewChild('reviewFileInput') reviewFileInput: ElementRef;
    @Input('modalImages') public modalImages: any;
    @Input('imagePointer') public imagePointer: number;
    @Output('cancelEvent') cancelEvent = new EventEmitter<any>();
    @Input('imageClass') public imageClass: any;
    ...

然后在下一个模板中让他调用＆＃34; add-photo-component＆＃34;我想使用这个课程，然后宣布下一个：

<ImageModal #imageModal
                       [modalImages]="images"
                       [isReviewPhotos]="true"
                       [imageClass]="classMap"
                       (cancelEvent)="cancelImageModel()"
                       [options]="options"
                       [isUploadButtonAvailable]="isUploadButtonAvailable"
                       (clickEvent)="onUploadClick()"
                       (handleEvent)="handleNgUpload($event)"
                       (deleteEvent)="deleteImage($event)"
                       (handleSelectedImgEvenet)="onImageClick($event)"
                       (imageContainer)="{'img-media-container': isImageSelected}"> // And this class which I want to use 
</ImageModal>

然后在组件add-photo-component中我想在点击的图像上设置这个隐藏的类

onImageClick($event) {
        if ($event && $event.index >= 0) {
            this.selectedImage = this.images[$event.index];
            this.isImageSelected = !this.isImageSelected;
        }
    }

样式：

.img-media-container{
    border-radius: 10px;
    border: 3px solid #4774c5;
    padding: 3px;
}

那么我怎样才能在一个选定的项目上应用课程。我知道我需要从主模板中获取一个索引，但我没有任何想法，我怎么能意识到这一点。

Answer 1

您的帖子很乱，我不知道哪个代码属于哪个组件。但是根据所选元素添加类很简单，并且看起来总是相似。试试这种方式：

<div *ngFor ="let image of modalImages; let index = index">
       <div [class.img-media-container]="image === selectedImage" >
          <!-- some code -->
       </div>
</div>

您可以在Angular创建者的official tutorial中找到相同的示例代码。在章节中搜索：为所选英雄设置样式

Answer 2

它在角度2中非常酷。这样做的想法是创建并初始化一个数组。在单击div时，div的索引应该在初始化数组内推送。并将此类添加到仅满足条件的div。

获取索引。

<div class="photo-container" *ngFor ="let i of modalImages; let index = index"></div>

添加CSS类

   <div [class.ImageContainer]="array[i]=i">
       <i class="ionicons ion-ios-close remove-icon" (click)="deleteImageEvent(index)"></i>
       <img (click)="onImageClickEvent(index)" src="{{ i.thumb }}">
   </div>

（ImageContainer是类名，数组[i] = i是条件）

https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html 转到链接了解更多详情

仅显示已点击项目的角度2

2 个答案: