Angular框架 使用Modal点击图片放大显示

目录

前言

一、Modal是什么？

二、使用步骤

1.最简单的用法

2.图片点击放大效果

总结

---

前言

在我们需要点击图片放大的时候有许多的方法可供选择，今天来介绍一下Angular中我使用的一个方法，首先介绍一下Angular中的Modal对话框。

---

一、Modal是什么？

用作显示系统的重要信息，并请求用户进行操作反馈，eg：删除某个重要内容时，弹出 Modal 进行二次确认。这里我把它用作点击显示一个新的有遮罩层的图片。        

二、使用步骤

1.最简单的用法

代码如下：

      <Modal [(ngModel)]="this.state.modal1" [transparent]="true" [title]="'Title'" [footer]="footer">
        <div [ngStyle]="{ height: 100, overflow: 'scroll' }">
          scroll content... <br />
          scroll content... <br />
          scroll content... <br />
          scroll content... <br />
          scroll content... <br />
          scroll content... <br />
        </div>
      </Modal>

这样就创建好了一个简单的对话框。

点击text only 便会弹出这个对话框。我们想要实现的效果则是点击他实现图片放大的效果。

 

2.图片点击放大效果

代码如下（HTML）：

//原本的图片
<img style="width: 80px; height:100px" [src]="getAccountPicture(account)"
                 (click)="imageClick(account.a_Accounts)"
                 onError="this.src='./assets/images/common/user.png'" >
//显示放大的图片
<Modal [(ngModel)]="this.state.modal1" [transparent]="true">
  <img class="image-show"   src="{{this.bigPicture}}"
       onError="this.src='./assets/images/common/user.png'"/>
</Modal>

代码如下（TypeScript）：

// 图片点击 
 imageClick(accountId) {
    this.showModal('modal1');
    this.bigPicture = this.getAccountPictures(accountId);//获得图片
    console.log(this.bigPicture);
  }
  state = {
      modal1: false,
  };
  onClose(key) {
    this.state[key] = false;
  }
  showModal(key) {
    this.state[key] = true;
  }

 代码如下（Css样式）：

/**弹出图片样式*/

:host ::ng-deep .am-modal-transparent{
  /*height:50% ;*/
  width: 95% ;
  margin-top: 0;
}
:host ::ng-deep .am-modal-transparent .am-modal-content {
  border-radius: 7px;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
:host ::ng-deep .am-modal-transparent .am-modal-content .am-modal-body {
  padding: 0 0 0;
}
:host ::ng-deep .am-modal-body{
  font-size: 15px;
  color: #888;
}

效果如下：

点击前

点击后：

---

总结

如有不足，还望指正！