我在《ionic3开源组件》提到了图片选择组件，但是后来发现其实现功能很简单，而且我不喜欢它写死了宽高大小，这对于不同分别率不太友好。于是尝试实现了一下，先上效果图：
image.png
组件名为image-selector
image-selector.html:
<ion-row align-items-center>
<ion-col col-3 align-self-center *ngFor="let item of images, let i = index">
<ion-thumbnail tappable (click)="onViewImages(i)">
<img src="{{item?.originPath}}" class="auto-image" [style.height]="width"/>
</ion-thumbnail>
</ion-col>
<ion-col col-3 align-self-center>
<ion-thumbnail *ngIf="images && images.length<max && canAdd" tappable (click)="onAddImage()">
<img #addImage src="assets/imgs/add.png" class="auto-image"/>
</ion-thumbnail>
</ion-col>
</ion-row>
image-selector.scss:
image-selector {
img.auto-image{
width: 100%;
}
}
image-selector.ts:
import { Component, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
import { IonicPage, ModalController, NavParams } from 'ionic-angular';
export interface IImageObj {
id: string;
originPath: string;
thumbPath?: string;
name?: string;
}
/**
* Generated class for the ImageSelecterComponent component.
*
* See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
* for more info on Angular Components.
*/
@Component({
selector: 'image-selector',
templateUrl: 'image-selector.html'
})
export class ImageSelectorComponent {
@Input() max: number = 9; //最多可选择多少张图片，默认为4张
@Input() canAdd: boolean = true; //是否允许新增
@Input() canDelete: boolean = true; //是否允许删除
@Input() images: IImageObj[] = []; //图片列表,与fileObjListChange形成双向数据绑定
@Output() addImage = new EventEmitter<any>();
@Output() selectChanged = new EventEmitter<any>();
width: string;
@ViewChild('addImage') img: ElementRef;
constructor(public modalCtrl: ModalController) {
}
onAddImage() {//新增照片
this.addImage.emit();
}
ngAfterViewChecked(){
this.width = this.img.nativeElement.width + 'px';
}
//照片预览
onViewImages(index: number) {
//以下代码自行调整
let imgCopies = JSON.parse(JSON.stringify(this.images)); //复制对象，以免内部修改了对象
let modal = this.modalCtrl.create('ImageViewerPage', {selectedIndex: index, images: imgCopies, canEdit: this.canDelete});
modal.onDidDismiss(data =>{
if(data){
this.images = data;
this.selectChanged.emit(data);
}
});
modal.present();
}
}
注意
-
onViewImages方法里面我调用了另一个封装的ImageViewer组件，仿微信用于弹框缩放、滑动显示图片的，你可以自行封装自己的方法。 - 等宽高原理是借用了add.png的维度，利用add.png高度设置其它图像的高度。
- 重要的方法是
ngAfterViewChecked，用于在内部调整图像高度，为什么用该方法，先了解下angular组件的生命周期。
ngAfterViewChecked：每次做完组件视图和子视图的变更检测之后调用。
仅抛个砖，自己做点有趣的组件吧。
