viewer是一款非常强大的图片查看器,而angular中没有比较好的图片查看工具,viewer有js和jQuery版本,这里用到的是纯js版
1.首先项目是基于ng-alain和ng-zorro框架使用的,angular原生项目也可以使用,只是目录结构有区别而已
2.下载viewer.js文件 http://files.cnblogs.com/files/linq7/viewer.zip,也可以去官网下载 原生js版本
3.解压压缩包 将viewer文件放在项目src/libs目录下,没有libs自己创建一个
4.在项目 angular.json文件中 styles和scripts下配置css和js文件目录,做一个全局加载,如下图(记住不要写错了 写在test域里面去了)
5.新建一个组件 我这里创建的叫image-view组件,并且将其注册为全局共享,这样整个项目都可以随时引用
1)组件html部分:
<ul id="dowebok" #dowebok class="list"> <img class="image" [src]="item" #btn *ngFor="let item of imageUrl" [width]="width" [height]="height"> </ul>
2)ts部分: 引入你放的位置
import { Component, OnInit, ViewChild, ElementRef, Input, Renderer2 } from '@angular/core';import * as Viewer from 'src/libs/viewer/viewer';
@ViewChild('dowebok', { static: false }) dowebok: ElementRef; // 图片地址 @Input() imageUrl: any = []; // 默认预览图大小 (单位px) @Input() width: any = 40; @Input() height: any = 40; constructor() { } ngOnInit(): void { // 传入是单条转换为数租 if (typeof this.imageUrl == 'string') { this.imageUrl = [this.imageUrl] } } ngAfterViewInit(): void { new Viewer(this.dowebok['nativeElement']); let event = new MouseEvent('click', { bubbles: true }); (this.dowebok['nativeElement'] as any)['dispatchEvent'].apply(this.dowebok['nativeElement'], [event]) }
3)我这里是做了一个input传入属性处理,方便支持传入字符串地址或者是字符串数组都行,这个根据你们自己的需求来做就好了
new Viewer 必须是在ngafterViewInit里面实现,不然后续的事件监听都会有问题,目前没有去深入研究原因,有兴趣的可以自己去研究下,优化写法
6. 使用:
1) html
<image-view [imageUrl]="imageUrls"> </image-view>
2) imageUrls 传入一个图片url数组即可
注意: 组件只支持传入一次imageUrl,如果使用中需要动态改变这个值可以在组件<image-view>上加上*ngIf指令销毁在生成就可以了
ps: 不是技术大佬,菜鸡一个,只是希望能帮到有需要的朋友,写的不好勿喷,欢迎指正错误,交流,有问题可以给我留言,谢谢