Question

我正在使用角形材质树组件。我可以获取所选节点的详细信息。现在，我要实现的是获取所选节点的父级或整个父级层次结构。你知道我该怎么做到吗？

在有角度的材料文档中，我的树看起来像这样：

https://stackblitz.com/angular/mrkvpbkolad?file=app%2Ftree-nested-overview-example.ts

Answer 1

如果要获取整个父级层次结构，请在子节点上单击，我的解决方案是使用递归函数：

onLeafNodeClick(node) {
  const ancestors = getAncestors(this.dataSource.data, node.name);
}

getAncestors(array, name) {
  if (typeof array !== 'undefined') {
    for (let i = 0; i < array.length; i++) {
      if (array[i].name === name) {
        return [array[i]];
      }
      const a = this.getAncestors(array[i].children, name);
      if (a !== null) {
        a.unshift(array[i]);
        return a;
      }
    }
  }
  return null;
}

这将返回一个新数组，该数组的根项的索引为0，而被单击的子节点的索引为n-1。

工作示例：

https://stackblitz.com/edit/angular-r7rxyl-vwdlhy?file=app/tree-nested-overview-example.ts

该节点的直接父级为：

const directParent = ancestors[ancestors.length - 2];

您可以使用此数组显示面包屑（root/child_1/child_2）：

let breadcrumbs = '';
ancestors.forEach(ancestor => {
  breadcrumbs += `${ancestor.name}/`;
});

如果您只想获取父元素的某些属性（例如：父名称，父ID ），那么我的解决方案是处理原始数据，然后将其分配给mat-tree 数据源。我们可以在每个节点parent上添加一个新属性，该属性将是存储父元素所需属性的对象。

代码为：

this.dataSource.data = this._processData(TREE_DATA);

_processData(data, parent = null) {
  data.forEach(item => {
    if (parent !== null) {
      item.parent = {name: parent.name};
    } else {
      item.parent = null;
    }
    if (item.children) {
      this._processData(item.children, item);
    }
  });
  return data;
}

数据处理后的示例叶节点：

{
  name: "Apple", 
  parent: {
    name: "Fruit"
  }
}

工作示例：

https://stackblitz.com/edit/angular-r7rxyl?file=app%2Ftree-nested-overview-example.ts

在有角材质嵌套树中获取子节点的父节点

1 个答案: