在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

我直接使用窗口对象，但不建议使用：

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

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