Излучение события из сервиса для определенного компонента - PullRequest
Новая
       12

Излучение события из сервиса для определенного компонента

0 голосов
/ 23 ноября 2018

Здравствуйте, у меня есть следующая проблема.
У меня есть рекурсивный компонент 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 только для проверки на наличие root-значения для контейнера?

...