Angular PrimeNG树形组件选中子节点时如何给父节点添加连字符？

我在使用PrimeNG开发Angular项目时，需要实现选中子节点时给对应父节点添加连字符的功能，现有代码如下：

现有TypeScript代码 #

ngOnInit生命周期钩子 #

ngOnInit() {
  if(this.title === "Create"){
    this.dataProfilo = {}
    this.dataProfilo.function = [];
    this.service.getTree().subscribe(
      (res) => {
        this.node= res.nodeTree;
      },
    )
  }else{
    this.dataProfilo={...this.profilo};
    this.service.getProfiloById(this.profilo.id).subscribe(
      (res) =>{
        if(res && res.nodeTree.length >0){
          this.node= res.nodeTree;
          res.nodeTree.forEach(elem => {
            this.checkSelectionNode(elem);
          });

          if(res && res.nodeTree.length >0){
            this.node= res.nodeTree;
            res.nodeTree.forEach(elem => {
              this.uncheckSelectionNode(elem);
            });
          }
        }
      },
      (error)=> {
      });
  }  
}

节点选中判断逻辑 #

checkSelectionNode(node) {
  if (node.data.flag) {
    this.selectedFile.push(node);
  }
  if (node && node.children && node.children.length > 0) {
    node.children.forEach(childNode => {
      this.checkSelectionNode(childNode);
    });
  }
}

节点取消选中判断逻辑 #

uncheckSelectionNode(node) {
  if (node.data.flag == false) {
    this.unselectedFile.push(node);
  }
  if (node && node.children && node.children.length > 0) {
    node.children.forEach(childNode => {
      this.uncheckSelectionNode(childNode);
    });
  }
}

节点选中事件处理（父子节点同步处理） #

nodeSelect(event){
  if(event.node.children && event.node.children.length > 0){
    event.node.children.forEach(element => {
      const functionFK = this.checkChildrenNode(element);
      if(functionFK){
        let checkNodeExist = false;
        this.dataProfilo.function.forEach(element => {
            if(element === functionFK){
              checkNodeExist = true;
            }
        });
        if(!checkNodeExist){
          this.dataProfilo.function.push(functionFK);
        }
      }
    });
  } else {
    if(event.node.data.functionFK){
      let checkNodeExist = false;
      this.dataProfilo.function.forEach(element => {
        if(element === event.node.data.functionFK){
          checkNodeExist = true;
        }
      });
      if(!checkNodeExist){
        this.dataProfilo.function.push(event.node.data.functionFK);
      }
    }
  }
}

其他关联方法 #

节点取消选中事件处理

nodeUnselect(event) {
  const nodes = [];
  if (event.node.children && event.node.children.length > 0) {
    event.node.children.forEach(element => {
      const functionFK = this.checkChildrenNode(element);
      if (functionFK) {
        nodes.push(functionFK);
      }
    });

    this.dataProfilo.function = this.dataProfilo.function.filter(val => !nodes.includes(val));

  } else {
    if (event.node.data.functionFK) {
      this.dataProfilo.function = this.dataProfilo.function.filter(
        elem => {
          return elem != event.node.data.functionFK
        }
      );
    }
  }
}

子节点遍历逻辑

遍历逻辑说明：

• 若节点及子节点存在且子节点长度大于0，通过forEach循环遍历判断节点是否被选中

checkChildrenNode(node): any {
  if (node && node.children && node.children.length > 0) {
    node.children.forEach(childNode => {
      this.checkChildrenNode(childNode);
    });
  } else {
    return node.data.functionFK;
  }
}

切换事件处理

changeAssegnate(event:any){
  if(event.checked){
    this.toggle = 'assegnate';
  }else{
    this.toggle =  null;
  }
  console.log(event)
}

我使用的技术栈为Angular + PrimeNG，请问各位有什么实现思路吗？

内容的提问来源于stack exchange，提问作者A. S. Bush