Angular6：Mat-tree-node 选择/点击事件实现

Question

我正在使用带有动态数据的 Angular Material Tree Control。

这是完整示例的链接：

例子在这里

它的工作原理如示例中所述。现在我想启用每个节点单击事件并在我的打字稿函数中发送（角度表达式）绑定数据。

任何人都可以指导我吗？

我尝试了不同的代码，但无法为单击启用树节点。

见html：

    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
    <button mat-icon-button disabled ></button>
    {{node.item}}
  </mat-tree-node>
  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
    <button mat-icon-button  (click)="applyFilter($event)"
            [attr.aria-label]="'toggle ' + node.filename" matTreeNodeToggle>
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.item}}
    <mat-progress-bar *ngIf="node.isLoading"
                      mode="indeterminate"
                      class="example-tree-progress-bar"></mat-progress-bar>
  </mat-tree-node>
</mat-tree>

我试过这个来源，但仍然无法修复它。我尝试了堆栈溢出解决方案，但还无法解决我的问题。

 ngAfterViewChecked() {
    this.treeNodes.forEach((reference) => {
      if (!this.hasListener.includes(reference.nativeElement)) {
        console.log('* tick');

        this.renderer.listen(reference.nativeElement, 'click', () => {
          this.updateHighlight(reference);
        });
        this.renderer.listen(reference.nativeElement.children.item(0), 'click', () => {
          this.updateHighlight(reference);
        });

        this.hasListener = this.hasListener.concat([reference.nativeElement]);
      }
    });

    this.hasListener = this.hasListener.filter((element) => document.contains(element));
    console.log('*', this.hasListener.length);
  }

Answer 1

您可以将您{{node.item}}的按钮包裹在一个 mat-button 中，并从那里绑定到 click 事件以将节点元素传递给您的组件方法。

<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
    <button mat-button (click)="logNode(node)">
      {{node.item}}
    </button>
</mat-tree-node>

然后在你的组件中

 logNode(node){
    console.log(node)
  }