NG-ZORRO中的image组件

实现需求：在确认画面，使用新组件替代原有框架组件，实现图片显示与点击放大预览

 

官网代码

import { Component } from '@angular/core';

@Component({

  selector: 'nz-demo-image-basic',

  template: `

    <img

      nz-image

      width="200px"

      height="200px"

      nzSrc="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"

      alt=""

    />

  `

})

export class NzDemoImageBasicComponent {}

 

在根组件中引入模块

import { NzImageModule } from 'ng-zorro-antd/image';

 

 

上部分为前个画面实现的文件上传功能

 在 @NgModule 装饰器中的imports: 引入moudle,再确认画面的模板中寻找对应的位置，注释掉原有代码

 

 保留image标签，并在里面使用nz-image，宽高根据原有设计，使用属性绑定，要将 <img> 的nzSrc属性绑定到组件的属性，请将目标nzSrc 放在方括号中，后跟等号，然后是组件的属性，为model.name，即上个画面通过localstorage传入此画面。

实现效果

 总结：很简单的功能花了将近一天实现，还得再努力啊。