树材角度2选择状态

Question

当我从树中单击一个节点时，我有一个Angular 2材质树。我需要在该节点上具有选定状态才能更改背景颜色。我不知道该怎么做。我在文档中没有找到任何可以帮助我的东西。这是html代码和一张图片，它看起来应该像树一样

       <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" #matTree [ngStyle]="{ 'color': red}">
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
          <button mat-icon-button disabled></button>
          {{node.filename}}
        </mat-tree-node>

        <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding >
          <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.filename" click="onClick()">
            <mat-icon class="mat-icon-rtl-mirror">
              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
            </mat-icon>
          </button>
          {{node.filename}}
        </mat-tree-node>
      </mat-tree>

Answer 1

有一种更简单，更干净的方法可以做到这一点。

所有您需要做的就是添加
(click)="activeNode = node" [ngClass]="{ 'background-highlight': activeNode === node }"
到每个mat-tree-node。

不要忘记将activeNode变量添加到组件中。

而已！

Answer 2

我设法为您要实现的目标提供了一个可行的示例。该演示文稿是基本的，但其布局与示例代码相同。我在我的解决方案的最底部包括了一个链接。基本上可以归结为以下代码。

component.ts

  // inside of the component class

  @ViewChildren(MatTreeNode, { read: ElementRef }) treeNodes: ElementRef[];

  hasListener: any[] = [];
  oldHighlight: ElementRef;

  updateHighlight = (newHighlight: ElementRef) => {
    this.oldHighlight && this.renderer.removeClass(this.oldHighlight.nativeElement, 'background-highlight');

    this.renderer.addClass(newHighlight.nativeElement, 'background-highlight');
    this.oldHighlight = newHighlight;
  }

  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);
  }

component.css

.background-highlight {
  background-color: whitesmoke;
}

我将大部分逻辑放置在ngAfterViewInit生命周期挂钩中。这样便可以访问@ViewChild查询结果。该查询返回对<mat-tree-node></mat-tree-node>模板中所有元素的引用。结果存储this.treeNodes为QueryList。

我遍历整个列表。我检查是否被引用nativeElement已具有其事件侦听器。事件监听器在鼠标上触发click。回调updateHighlight处理background-highlightcss类的删除和添加，以便它在DOM中保持唯一。

我添加了两个针对<mat-tree-node></mat-tree-node>及其嵌套<button></button>元素的事件监听器。单击两个位置会同时突出显示树节点。

在updateHighlight中，将background-highlight类从以前添加的位置删除（如果适用）。当前单击的任何内容都将获得该background-highlight课程。对clicked元素的引用将替换的先前值this.oldHighlight。

为了性能起见，我包括了this.hasListener。该数组存储<mat-tree-node></mat-tree-node>已接收其侦听器的元素。我可以检查数组，以确保每次传递时都不会不必要地覆盖侦听器ngAfterViewChecked。

逻辑的最后一点this.hasListener不会失去控制。不再附加到DOM的任何元素都不再是问题。

我保留两条console.log语句，因为它们的输出反映出该代码的工作范围超出了突出显示单击的树节点。

如有其他疑问，请参见存储库：https : //github.com/sosmaniac-FCC/mat-tree-node-example/tree/master/src/app/components/example-one。我确实从导入了一些额外的实用程序@angular/core。

当然，如果我在任何地方都错过了记号，请告诉我。我会尽力而为。