Angular6: выбор узла дерева матов / реализация события щелчка

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}} в матричную кнопку и привязать к нему событие 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)
  }