Question

您好，我遇到以下问题。
我有一个递归组件NodeComponent，我用它创建了一个TreeView。

问题是我没有我知道在处置根Node时该如何处理。为了删除层次结构中的特定节点，我调用了一个服务，我将当前节点及其父节点传递给该服务。然后，服务splices将元素移开，ngFor会对其进行可视化处理。
对于根目录，我该如何通知`容器组件将整个组件关闭？

模型

export interface TreeModel{
    id:string;
    children:Array<TreeModel>;
}

容器组件

export class TreeViewComponent implements OnInit {
  constructor(private treeService: HtmlGeneratorService) {

  }
  ngOnInit() {
  }
  public root: TreeModel;
}

<div class="row">
    <app-node  [model]="root" [parent]="null" [settings]="settings" ></app-node>

  </div>

递归组件

      @Component({
            selector: 'app-node',
            templateUrl: './node.component.html',
            styleUrls: ['./node.component.css']
            })
            export class NodeComponent implements OnInit, OnChanges {
              public isExpanded:boolean=true;

              constructor(private htmlService:HtmlGeneratorService) { }

              onDelete():void{
               if(this.parent==null){

               }
            this.htmlService.deleteNode(this.parent,this.model);
          }
              public onExpand():void{
                this.isExpanded=!this.isExpanded;
              }

              @Input()
              public model:TreeModel;

              @Input()
              public parent:TreeModel;
            }

        <div class="content-delete"><button (click)="onDelete()">Delete</button> 
        </div>

        <div>
           <ul>
             <li  *ngFor="let item of model.children">
                <div class="childNode">
                   <app-node [parent]="model" [model]="item"></app-node>
                </div>
            </li>
           </ul>
      </div>

DeleteService

export class HtmlGeneratorService {
 public deleteNode(parent:TreeModel,child:TreeModel){
     if(parent==null){
       //do what ? i can i emit an event that the `TreeViewComponent` can respond?
     }
     var childIndex=parent.children.findIndex(x=>x.id==child.id);

     parent.children.splice(childIndex,1);
  }
}

正如您在我的服务中看到的那样，我不知道如何通知我的TreeViewComponent。我看到的唯一解决方案是我必须在field中有一个特殊的NodeComponent将仅对根组件设置为true。如果我这样做的话..效率不高吗？基本上在所有Nodes中分配一个变量只是为了检查根，以便容器使用？

服务发出特定组件的事件

0 个答案: