从 angular 6 材质树中的子节点获取父层次结构 [英] Get parent hierarchy from a child node in angular 6 material tree
问题描述
我正在按照 教程 在 angular 6 中实现 cdk 树.我创建了一个树结构,现在我想通过使其可点击来从子节点获取父层次结构,而像 getDescendants 这样的方法可以获取节点的子节点,反之亦然.如何从子节点或叶节点获取父层次结构.
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, while there are methods like getDescendants to get children of a node, vice versa is not available. How can I get the parent hierarchy from a child or leaf node.
推荐答案
我已将这些方法添加到我的树组件中.请注意,我使用的是扁平树,这不适用于嵌套树.
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<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
)并将这个逻辑移到那里.
I'm planning to create my own FlatTreeControl
(by extending Angular CDK's FlatTreeControl
) and move this logic there.
更新
我已将上述逻辑移至我自己的 FlatTreeControl
实现:
I've moved the above logic to my own FlatTreeControl
implementation:
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;
}
}
}
}
这篇关于从 angular 6 材质树中的子节点获取父层次结构的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!