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