对树组件执行 onclick 操作

【问题标题】：To perform onclick action on tree component对树组件执行 onclick 操作
【发布时间】：2018-09-07 06:09:03
【问题描述】：

我在我的项目中使用 tree 组件。在 tree 组件上方，我放置了一个名为 select offering 的 input 组件，如下图所示。

这里我需要一些 select 组件中可用的操作。我的要求是：

1)当我输入输入字段时，只有 tree 必须显示，如果我离开它必须隐藏。

2) 例如，当我从父元素中选择子元素时，如果我选择 HTML5(子元素）。要在输入字段中显示的子元素。

这是stackblitz链接

【问题讨论】：

标签： angular angular-material

【解决方案1】：

1) 可以使用 (focus) 事件来处理可见性

2) 在项目上使用（点击）事件，在输入上使用 ngModel。

代码：

<input matInput placeholder="Select offering" [(ngModel)]="selectedItem" (focus)="showDropDown = true">

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" *ngIf="showDropDown ">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)="selectedItem = node.item;showDropDown = false">
          <button mat-icon-button disabled ></button>
          {{node.item}}
  </mat-tree-node>
  ....
</mat-tree>

我相应地编辑了您的代码： https://stackblitz.com/edit/angular-h8zdkh-2qt9rg?file=app/chips-autocomplete-example.html

【讨论】：