如何在angular2中一次打开一个弹出窗口并在外部单击时关闭弹出窗口

Question

我有一个弹出窗口，必须一次打开一个。它必须打开最近单击的一个并隐藏以前单击的一个。 它也不会在外部点击时关闭。 谁能帮我解决这个问题？

HTML：

<td>
          <a (click)="editCondition(rowData)">
            <i class="fa fa-ellipsis-h" style="color:#0847a1"></i>
          </a>
          <div class="switch-list" id="switch-list" *ngIf="rowData.isViewDetails">
            <a id="ccd_viewdetails" (click)="gotoViewDetails(rowData)">View Details</a>
            <a>Download</a>
          </div>
        </td>

TS：

 editCondition(rowData) {
    console.log(rowData);
    rowData.isViewDetails = !rowData.isViewDetails;
  }

这是工作演示：

https://stackblitz.com/edit/angular-c16wte?file=src/app/app.component.ts

Answer 1

只需重置所有items 或ccdList。

需要对你的函数进行一些小改动editCondition

 editCondition(rowData) {
    this.ccdList.forEach(item=>{
      item.isViewDetails = false;
    })
    console.log(rowData);
    rowData.isViewDetails = !rowData.isViewDetails;
  }

外部点击使用HostListener

@HostListener('document:click', ['$event'])
  windowClick($event) {
    let exceptElementFound = false;
    Object.keys($event.target.classList).forEach(key => {
      if ($event.target.classList[key] == "fa-ellipsis-h") {
        exceptElementFound = true;
      }
    })
    if (!exceptElementFound) {
      this.ccdList.forEach(item => {
        item.isViewDetails = false;
      })
    }
  }

工作副本在这里 - https://stackblitz.com/edit/angular-bbyz8n

Answer 2

您可以尝试在您的应用中使用HostListener。

@HostListener('document:click', ['$event'])
clickOutside(){
  // do something
}