angular - 获取 Angular Material 嵌套树中子节点的父节点

Question

我正在使用 Angular Material 树组件。我能够获取所选节点的详细信息。现在，我想要实现的是获取所选节点或整个父层次结构的父级。你知道我怎样才能做到这一点吗？

我的树在 Angular Material 文档中看起来像这样:

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