Angular：模态框弹出与关闭

最近做的系统中，有消息管理的功能，点击某条记录查看消息详情，可以展示消息发出人、发送时间、上传的附件等，都是很常规的功能，页面写的差不多时项目经理又提出一个要求：因为发消息有多个收件人，能不能显示两个按钮，点击后弹出弹窗，分别展示已经读了消息的收件人和未读消息的收件人？

what could I say??!!!You happy is ok

果真搬运代码的速度跟不上项目经理的脑洞。已读和未读的用户列表是后台传给我的，怎么判断的我们不管，怎么把这个列表放在模态框显示呢：

首先在页面上写两个<a>标签，绑定点击动作：

<div nz-col [nzSpan]="16" *ngIf="userShow">
                <nz-form-item nzFlex>
                  <nz-form-label nz-col [nzSpan]="8">查看收件人</nz-form-label>
                  <nz-form-control nz-col [nzSpan]="12">
                    <a (click)="viewIsReaded($event)">查看已读的收件人</a><br>
                    <a (click)="viewNotReaded($event)">查看未读的收件人</a>
                  </nz-form-control>
                </nz-form-item>
              </div>

然后在组件中在绑定的方法写弹出模态框的动作：

/**
   * 添加用户
   * @param authority
   */
  /* 查看已读的收件人 */
  viewIsReaded(data: any) {
    this.modalService.create({
      nzTitle: '已读收件人列表',
      nzContent: ReadedUserListComponent,
      nzWidth: 800,
      nzComponentParams: {
        data: {
          id: this.id,
          isRead: 1
        }
      },
      nzFooter: null
    });
  }

  /**
   * 添加用户
   * @param authority
   */
  /* 查看未读的收件人 */
  viewNotReaded(data: any) {
    this.modalService.create({
      nzTitle: '未读收件人列表',
      nzContent: ReadedUserListComponent,
      nzWidth: 800,
      nzComponentParams: {
        data: {
          id: this.id,
          isRead: 0
        }
      },
      nzFooter: null
    });
  }

这里注意在组件中引入想要弹出的页面（模态框中展示）的组件ReadedUserListComponent，使用 this.modalService.create显示模态框。并且在调用时传入参数id和是否阅读的状态码isRead（0：未阅读，1：已阅读）

在ReadedUserListComponent组件中，传入参数：

 @Input()
  set data(value: any) {
    if (!helpers.IsEmpty(value)) {
      this.id = value.id;
      this.isRead = value.isRead;
    }
  }

关闭模态框时调用方法：

/**
   * 取消
   */
  handleCancel(e) {
    this.modal.destroy({ data: null });
  }

页面上也很简单：

<div class="c-search-result-list">
  <div class="c-search-option" nz-row>
    <div nz-col [nzSpan]="24" style="text-align:left">
      <button nz-button class="c-mt10" (click)="searchData()"><i nz-icon type="sync" theme="outline"></i></button>
    </div>
  </div>
  <nz-table #ajaxTable [nzScroll]="scrollValue" [nzData]="dataSet" [nzLoading]="loading" nzBordered="true"
    nzSize="small">
    <thead>
      <tr>
        <th nzWidth="25%">账号</th>
        <th nzWidth="25%">是否已读</th>
        <th nzWidth="25%">标题</th>
        <th nzWidth="25%">第一次阅读时间
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of ajaxTable.data; let index = index;">
        <td>{{data.account}}</td>
        <td>{{data.isRead}}</td>
        <td>{{data.name}}</td>
        <td>{{data.readDate}}</td>
      </tr>
    </tbody>
  </nz-table>
</div>

这样就实现了展示模态框来显示已读未读列表。