Запуск обработчика Angular Event для каждого экземпляра компонента - PullRequest
0 голосов
/ 23 октября 2019

У меня есть страница (hostview), на которой я динамически создаю компоненты, содержащие информацию, включая p-дерево, которое пользователь создает в пользовательском интерфейсе. Я добавляю их с помощью кнопки из вида узла и удаляю их с помощью кнопки в компоненте дерева, который передает событие обратно в представление узла через службу уведомлений, например, так:

Создание в представлении узла:

constructor(@Inject(Loader) service, @Inject(ViewContainerRef) viewContainerRef, public dataCenter: DataCenterService,private router: Router) {
    this.service = service;
    this.trees = this.dataCenter.getTreeState();
    this.service.setRootViewContainerRef(viewContainerRef)
    this.newTree();
}



newTree() {
    var newTree = this.service.addDynamicComponent();
    newTree.instance.ref = newTree;

    newTree.instance.service.onDestroyEvent.subscribe(
      treeRef => {
        for(var i=0;i<this.trees.length; i++){
          if(this.trees[i].instance.ref == treeRef){
            this.trees.splice(i,1);
          }
        }
       }
      );
    this.trees.push(newTree);
}

Служба уведомлений:

export class NotificationService {
    onDestroyEvent: EventEmitter<ComponentRef<ConnectionTreeComponent>> = new EventEmitter();
    constructor() {}
}

компонент дерева:

Служба: NotificationService;

constructor(public dataCenter: DataCenterService, public treeService: TreeDragDropService, service:NotificationService) {
   this.service = service; 
}

ngOnDestroy() {
   this.service.onDestroyEvent.emit(this.ref); /*ComponentRef passed back to hostview*/
}

Так что это технически работает, но этовызывается один раз для каждого экземпляра компонента дерева, а не только один раз. Как я могу исправить это для правильной работы?

1 Ответ

0 голосов
/ 24 октября 2019

Я удалил NotificationService и поместил onDestroyEvent в компонент дерева, и соответственно изменил рефакторинг. Это решило проблему повторения события.

...