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
}

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

2 个答案: