树组件单击事件

Question

我正在使用树组件和输入组件，如下图所示.

这里，如果我选择子元素（i，e Angular JS）。选择子元素并在输入字段上显示，如下图所示。

这里的问题是：当我输入输入字段时，只显示树，但当我在树外单击树时，树应该消失。如何做到这一点？我需要自动完成组件的类似操作。

这是stackblitz链接。

Answer 1

使用主机侦听器检查鼠标单击是否在所需元素上发生，然后相应地更改show DropDown的状态。对于Ex：

  showDropDown = false;
  @HostListener('click', [`$event`]) 
  onClick(event: MouseEvent){
    this.showDropDown = event.target['tagName'].match('MAT-TREE-NODE') || event.target['tagName'].match('INPUT') ? true : false;
  }

对于自动完成功能：检查此stackblitz帖子。