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';

@ViewCh