Событие щелчка компонента дерева

Question

Я использую компонент дерева вместе с компонентом ввода , как показано на рисунке ниже.

Здесь, если я выберу дочерний элемент (i, e Angular JS). Этот дочерний элемент выбирается и отображается в поле ввода, как показано на рисунке ниже.

Здесь проблема заключается в следующем: Когда я вхожу в поле ввода, появляется только дерево , но когда я щелкаю вне дерева дерева должно исчезнуть. как это сделать?Мне нужны аналогичные действия компонента autocomplete .

Вот ссылка stackblitz .

Answer 1

Используйте прослушиватель хоста, чтобы проверить, происходит ли щелчок мыши на требуемом элементе, затем измените состояние showDropDown соответствующим образом. Например:

  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 сообщение.