树材质angular 2选择状态 [英] Tree material angular 2 selected state

问题描述

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

I have a Angular 2 Material Tree when I click a node from the tree I need to have the selected state on that node to change the background color. I have no idea how I can do that. I didn't find nothing in documentation to help me. Here is the html code and a picture that how it should look the tree

       <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>

推荐答案

我设法开发了一个您想要实现的工作示例.演示文稿是基本的，但它使用与您的示例代码相同的布局.我在我的解决方案的最底部包含了一个链接.基本上可以归结为以下代码.

I managed to develop a working example of what you are trying to achieve. The presentation is basic but it uses a layout identical to your example code. I included a link at the very bottom to my solution. It basically boils down to the below code.

  // 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 中.

I positioned most of my logic inside of the ngAfterViewInit lifecycle hook. This is so I could access the results of the @ViewChild query. The query returns references to all of the <mat-tree-node></mat-tree-node> elements in the template. The results are stored in this.treeNodes as a QueryList.

我遍历列表.我检查引用的 nativeElement 是否已经有它的事件侦听器.事件侦听器在鼠标 click 上触发.回调 updateHighlight 处理 background-highlight css 类的删除和添加，使其在 DOM 中保持唯一.

I iterate across the list. I check to see if the referenced nativeElement already has its event listeners. The event listeners trigger on mouse click. The callback updateHighlight handles the removal and addition of the background-highlight css class so that it remains unique in the DOM.

我添加了两个事件侦听器，目标是 及其嵌套的 元素.单击这两个位置会突出显示树节点.

I added two event listeners targeting the <mat-tree-node></mat-tree-node> and its nested <button></button> element. Clicking both places highlights the tree node all the same.

在 updateHighlight 中，我从之前添加的任何位置删除了 background-highlight 类(如果适用).当前单击的任何内容都会获得 background-highlight 类.对被点击元素的引用会替换 this.oldHighlight 的先前值.

In updateHighlight I remove the background-highlight class from wherever it was previously added (if applicable). Whatever is currently clicked gets the background-highlight class. A reference to the clicked element replaces the previous value of this.oldHighlight.

为了性能，我包含了this.hasListener.该数组存储已经接收到它们的侦听器的 元素.我可以检查数组以确保我不会在每次 ngAfterViewChecked 传递时不必要地覆盖侦听器.

For the sake of performance, I included this.hasListener. The array stores the <mat-tree-node></mat-tree-node> elements that have already received their listeners. I can check the array to ensure that I am not needlessly overwriting listeners with each pass of ngAfterViewChecked.

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

The last bit of logic keeps this.hasListener from growing out of control. Any elements no longer attached to the DOM are no longer a concern.

我保留了两个 console.log 语句，因为它们的输出反映了代码的作用不仅仅是突出显示单击的树节点.

I kept in two console.log statements because their outputs reflect that the code works beyond highlighting clicked tree nodes.

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

For any other questions, see the repository: https://github.com/sosmaniac-FCC/mat-tree-node-example/tree/master/src/app/components/example-one . I did import some extra utilities from @angular/core.

当然，如果我在任何地方错过了标记，请告诉我.我会尽我所能跟进.

Of course, if I missed the mark anywhere just let me know. I will follow-up the best I can.

这篇关于树材质angular 2选择状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！