我正在跟踪一个
tutorial来实现角度为6的cdk树.我创建了一个树结构,现在我想通过使它可点击来从子进程中获取父层次结构,而有一些像getDescendants这样的方法来获取节点的子节点,副反之亦然.如何从子节点或叶节点获取父层次结构.
解决方法
我已将这些方法添加到我的树组件中.请注意,我使用平面树,这不适用于嵌套树.
@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)并在那里移动这个逻辑.
UPDATE
我已将上述逻辑移至我自己的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;
}
}
}
}
