Javascript 嵌套组件角度2的聚焦输出

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

表单内多选组件的代码：

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

我想在单击此组件时隐藏复选框列表
但是，当我点击应用程序multi-selection focusout外表单中的任何位置时，问题就不起作用了

---

在取消聚焦任何组件时，他们是否可以采取任何方式进行事件？

这称为单击外部。比如看

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

@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);
    }
  }
}

@指令({
选择器：“[单击外部]”
})
导出类ClickOutside指令{
@Output（）clickOutside=neweventemitter（）；
构造函数（私有elementRef:elementRef）{
}
@HostListener（'文档：单击'，['$event'，'$event.target']））
onClick（事件：MouseEvent，targetElement:HTMLElement）{
如果（！targetElement）{
返回；
}
const clickedInside=this.elementRef.nativeElement.contains（targetElement）
&&！（HTMLanchoreElement的targetElement实例）；
如果（！clickedInside）{
this.promoClickOutside.emit（null）；
}
}
}

您是否尝试过使用blur（）事件？