angular - 当我取消选中自定义树视图中的子节点复选框时，如何取消选中所有父节点

Question

我创建了一个带有复选框的自定义树视图。现在我需要在取消选中相应的子节点时取消选中相应的父级节点。

例如：在我的情况下，让我们选中所有复选框，然后如果我取消选中名为“fifth-b”的节点，那么所有节点都属于父节点，例如“fourth”、“third-b”、“second-a”、“first”复选框需要自动取消选中。

我想开发一个带有复选框和可折叠的完全自定义树视图，因此我们无法使用其他插件或材料设计。

请在以下位置找到我的代码 -

https://stackblitz.com/edit/angular-7xcthz

感谢您的大力帮助。

Answer 1

您可以尝试遍历整个树以查找节点，例如，您可以编写一些函数，例如：

  public unselectParents(searchNode: TreeNode, searchPivot: TreeNode): boolean {
    if (searchPivot === searchNode) return true;
    else if (searchPivot.children.length !== 0) {
      for (let i = 0; i < searchPivot.children.length; i++) {
        let value = this.unselectParents(searchNode, searchPivot.children[i]);
        if (value === true) {
          searchPivot.check = false;
          return true;
        }
      }
    }
    return false;
  }

然后在 selectNode 方法中调用这个方法：

  public selectNode(node: TreeNode, value: boolean): void {
    this.check(node, value);
    if (value == false) {
      this.unselectParents(node, this.data.root);
    }
  }

或者，您也可能在“TreeNode”界面中有一个属性“parent:TreeNode”。