javascript - 在 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)">