Question

我正在将Angular Material Tree Control与动态数据一起使用。

以下是完整示例的链接：

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

有人可以引导我吗？

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

请参阅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}}包裹在按钮上，然后从那里绑定到click事件，以将node元素传递给组件方法。

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

然后在您的组件中

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

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

1 个答案: