ionic2/3实战-自定义添加/预览图片组件

效果展示

前言

• app有许多页面需要添加图片并实现预览功能.所以有必要封装一个公共的组件去调用
• 由于代码比较多.不便贴出来.所以这里介绍一下大致结构.自己去github上看完整代码.

上贴出的代码都有可能改动,请以github上为准

准备

1. 插件准备
   camera插--拍照获得照片
   Image Picker--用于从相册多选照片

• 认识Swiper3--用于实现图片预览
• ionic版本最低为3.0

核心代码

• select-pic.ts单击图片放大看红色标注
  

  

• viewer-pic.ts
  

  

使用

• 如果你的app也分了多个Module,在使用前需要把导入Module.

  
  
  

• 调用组件

  
  
  

最后

angular自定义组件就是学会使用@input()和@output().本文也演示了自定义双向数据绑定的方法

@Input() name;
@Output() nameChange;