嵌套组件角度的焦点2

Question

我是角度2的新手 我有一个问题 我创建了一个多选组件，我将其添加到表单中 如图1所示：

表单内多选组件的代码：

<app-multi-selection  [multiSelection]="multiSelectionObject" (selectedProductsCodes)="getSelectedProductCodes($event)" (focusout) = "focusOutFunction()" ></app-multi-selection>

我想在点击此组件时隐藏复选框列表
但是当我点击app-multi-selection焦点外的表格中的任何位置时，问题都无法解决。

是他们在不聚焦任何组件时采取任何方式的事情吗？

Answer 1

它被称为click-outside。例如，请查看Outside-click directive for Angular 2

根据要求，我正在添加代码：

@Directive({
  selector: '[clickOutside]'
})
export class ClickOutsideDirective {
  @Output() clickOutside = new EventEmitter<any>();

  constructor(private elementRef: ElementRef) {
  }

  @HostListener('document:click', ['$event', '$event.target'])
  onClick(event: MouseEvent, targetElement: HTMLElement) {
    if (!targetElement) {
      return;
    }

    const clickedInside = this.elementRef.nativeElement.contains(targetElement)
      && !(targetElement instanceof HTMLAnchorElement);
    if (!clickedInside) {
      this.promoClickOutside.emit(null);
    }
  }
}