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传入此画面。

实现效果

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

NG-ZORRO中的image组件相关推荐

angular7中引用ng zorro antd的三种方式
在新版本的angular中使用新的ng zorro,按照官方文档一步一步来,没有报错,但是也没有反应. 试了一下官方的两种方式,第一种方式如果使用cnpm会报错,第二种方式会没有反应,也是因为使用了c ...
ng bootstrap css,Angular2学习笔记-ng bootstrap中motal组件使用
ng bootstrap是一个angular UI bootstrap库,里面包含了一些基本的UI组件(日期选择组件,按钮,下拉框等).目前的版本为v1.0.0-alpha.14,基于angular2 ...
NG ZORRO知识点总结
NG ZORRO的常用属性,包括但不限于,结合代码 <button nz-button [nzType]="'primary'" [nzSize]="'large' ...
Ng Zorro配置
Ng Zorro配置文章目录 Ng Zorro配置一.app.module里配置二.引入样式 1.使用全部组件样式 2.引入组件模块全局安装:npm i ng-zorro-antd g --s ...
ngzorro html源码,angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)
使用 NG ZORRO 在上一篇文章中,我们已经安装了NG ZORRO,并在跟模块中引入了,在子模块中使用还需要再次引入. 编辑layout模块中的header组件在layout.module.ts ...
angular项目集成ng zorro 和ng alain
angular项目集成 ng zorro和ng alain(mock 和acl权限)学习笔记这段时间,比较忙,很久没有写博客了.作为后端开发人员,第一次接触angular,以下是个人的学习心得和D ...
如何在.NET中创建服务型组件
作者:张劲松本文选自:赛迪网 2002年12月03日对于在WINDOWS上作过一些开发的程序员来说,COM+应该是不会感到陌生的吧.COM+代表了Microsoft在COM技术平台上 ...
vue ui无效_vue开发中，父组件添加scoped之后。解决在父组件中无法修改子组件样式问题。...
在vue的开发中,我们需要引用子组件,包括ui组件(element.iview).但是在父组件中添加scoped之后,在父组件中书写子组件的样式是无效果的.去掉scoped之后,样式可以覆盖.但这样会 ...
vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48 来源:亿速云阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
react native 中下拉列表FlatList组件的讲解以及实例demo
RN中的下拉列表组件.以前RN的下拉列表是listView,但是这个组件的性能不咋地.当数据较多的时候就会很卡.所以RN就新出了一个FaltList组件来代替它.这里我们简单总结一下新的下拉组件. 一 ...

NG-ZORRO中的image组件

NG-ZORRO中的image组件相关推荐

最新文章

热门文章