anuglar项目引入viewer.js图片查看器

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: 不是技术大佬,菜鸡一个,只是希望能帮到有需要的朋友,写的不好勿喷,欢迎指正错误,交流,有问题可以给我留言,谢谢

anuglar项目引入viewer.js图片查看器

相关推荐