Get parent hierarchy from a child node in angular 6 material tree

后端 未结 3 1167
天涯浪人
天涯浪人 2021-02-15 12:06

I am following a tutorial to implement cdk tree in angular 6. I created a tree structure, now I want to get the parent hierarchy from from the child by making it clickable, whil

3条回答
  •  后悔当初
    2021-02-15 12:49

    I've added these methods to my tree component. Note that I use the flat tree, this won't work for a nested tree.

    @Component({
      selector: 'es-outline-tree',
      // ...
    })
    export class OutlineTreeComponent implements OnInit {
      treeControl: FlatTreeControl;
    
      // other code...
    
      /**
       * Recursively expand all parents of the passed node.
       */
      expandParents(node: FlatTreeNode) {
        const parent = this.getParent(node);
        this.treeControl.expand(parent);
    
        if (parent && parent.level > 0) {
          this.expandParents(parent);
        }
      }
    
      /**
       * Iterate over each node in reverse order and return the first node that has a lower level than the passed node.
       */
      getParent(node: FlatTreeNode) {
        const { treeControl } = this;
        const currentLevel = treeControl.getLevel(node);
    
        if (currentLevel < 1) {
          return null;
        }
    
        const startIndex = treeControl.dataNodes.indexOf(node) - 1;
    
        for (let i = startIndex; i >= 0; i--) {
          const currentNode = treeControl.dataNodes[i];
    
          if (treeControl.getLevel(currentNode) < currentLevel) {
            return currentNode;
          }
        }
      }
    }
    

    I'm planning to create my own FlatTreeControl (by extending Angular CDK's FlatTreeControl) and move this logic there.

    UPDATE

    I've moved the above logic to my own FlatTreeControl implementation:

    import { FlatTreeControl } from '@angular/cdk/tree';
    
    export class CustomTreeControl extends FlatTreeControl {
      /**
       * Recursively expand all parents of the passed node.
       */
      expandParents(node: T) {
        const parent = this.getParent(node);
        this.expand(parent);
    
        if (parent && this.getLevel(parent) > 0) {
          this.expandParents(parent);
        }
      }
    
      /**
       * Iterate over each node in reverse order and return the first node that has a lower level than the passed node.
       */
      getParent(node: T) {
        const currentLevel = this.getLevel(node);
    
        if (currentLevel < 1) {
          return null;
        }
    
        const startIndex = this.dataNodes.indexOf(node) - 1;
    
        for (let i = startIndex; i >= 0; i--) {
          const currentNode = this.dataNodes[i];
    
          if (this.getLevel(currentNode) < currentLevel) {
            return currentNode;
          }
        }
      }
    }
    

提交回复
热议问题