在Angular2中嵌套NgIf和（單擊）

Question

我有一個按鈕，當單擊該按鈕時會產生許多子元素，我想創建一個“如果用戶單擊除子按鈕之一以外的任何位置的折疊”效果。 為此，我想在整個頁面上附加一個(click) = xyz() ，但是只有在按鈕被展開后才可以激活它。 然后，我將子元素放置在頁面寬度選擇器的前面（使用css z-index）。 有可能實現這一目標，還是有更好的方法做到這一點？

這是我到目前為止的內容（僅單擊按鈕即可切換）。

Answer 1

您仍然可以使用聲明性方法，只是在折疊時忽略事件

@HostListener('window:click', ['$event'])
windowClickHandler(event) {
  if(!this.expanded) return;
  collapse();
}

另一種方法可以是僅在擴展時啟用的指令

@Directive({
  selector: 'globalClick'
  host: {
      '[style.display]':'"none"',
  }
}
class GlobalClick {
  @Output() globalClick:EventEmitter = new EventEmitter();

  @HostListener('window:click', ['$event'])
  windowClickHandler(event) {
    this.globalClick.emit(event);
  }
}

然后像

<span *ngIf="expanded" (globalClick)="collapse($event)">

Answer 2

我直接使用window對象，但不建議這樣做：

//save reference
this.listener = (event)=>{...};

window.addEventListener('click', this.listener);
window.removeEventListener('click', this.listener);