从角度6材质树中的子节点获取父层次

Question

我正在学习在angular 6中实现cdk树的教程。我创建了一个树结构，现在我想通过使其可单击来从子节点获取父层次结构，而有getDescendants等方法可以获取节点的子节点，反之亦然。如何从子节点或叶节点获取父层次结构。

Answer 1

我已经将这些方法添加到我的树组件中。请注意，我使用平面树，这不适用于嵌套树。

@Component({
selector: 'es-outline-tree',
// ...
})
export class OutlineTreeComponent implements OnInit {
treeControl: FlatTreeControl<FlatTreeNode>;
// 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;
}
}
}
}

我计划创建我自己的FlatTreeControl(通过扩展Angular CDK的FlatTreeControl(，并将这个逻辑转移到那里

更新

我已经将上述逻辑转移到我自己的FlatTreeControl实现中：

import { FlatTreeControl } from '@angular/cdk/tree';
export class CustomTreeControl<T> extends FlatTreeControl<T> {
/**
* 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;
}
}
}
}

Answer 2

感谢Flauwekeul，简化了

import { FlatTreeControl } from '@angular/cdk/tree';
export class CustomTreeControl<T> extends FlatTreeControl<T> {
/**
* Iterate over each node in reverse order and expand each inferior level nodes until level 0.
*/
expandParents(node: any) {
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) {
this.expand(currentNode);
if (this.getLevel(currentNode) === 0) break;
}
}
}
}

Answer 3

父层次结构可以存储在数字数组中，其中每个数字都是回收嵌套节点的索引。为了在指定的节点上扩展树，我尝试使用以前的例子，但最终我决定这样做：

1( 每次我们点击节点时都必须调用ChangePath：

changePath(node) {
if (node.level < this.nodePath.length) {
this.nodePath.splice(node.level, this.nodePath.length - node.level);
}
this.nodePath.push(this.treeControl.dataNodes.indexOf(node));}

2( 接下来，当树崩溃时，我们必须调用nodePath中每个项目的扩展(当树崩溃是由删除节点引起的时，我们不想扩展它，所以最后一个元素从路径中删除(：

expandTreeOnSpecifiedNode(isDelete: boolean) {
if (isDelete) {
this.nodePath.pop();
}
this.nodePath.forEach(id => {
console.log(id);
this.treeControl.expand(this.treeControl.dataNodes[id]);
});
}