EventEmitter испускает данные, но не событие - PullRequest
Новая
       67

EventEmitter испускает данные, но не событие

0 голосов
/ 02 мая 2020

Я борюсь за определенный сценарий. Вот как выглядит мой класс Parent and Child 

export class ChildComponent{
    .....
    @Output select: EventEmiiter<SomeType> = new EventEmmiter();
    ....
    ....

    methodWhichEmits(){
          this.select.emit(objectOf_SomeType);
    }
}




 export class ParentComponent{

        onSelect(emittedObject){
              //perform some logic
              event.stopPropagation();
        }
    }



 Parent Template
   <child (select)="onSelect($event)"></child>

Насколько я понимаю (будучи новичком в angular), событие генерируется дочерним элементом и перехватывается в parent, а затем выполняется логическая обработка c в onSelect родительский метод для отправляемого события (привязка события).

Но проблема в том, что параметр родительского метода является не событием, а объектом SomeType, переданным от child. Я хочу получить событие в родительском методе и получить доступ к данным, полученным от потомка, используя объект события (что-то вроде event.target.value), потому что мне нужен объект события для вызова stopPropagation () при.

Even хотя код работает нормально, но тестовый случай не выполняется (в topPropagation ()), поскольку вместо события в методе parent получен объект SomeType.

Ответы [ 3 ]

1 голос
/ 02 мая 2020

EventEmitter - это не событие HTML, а расширение субъекта, поэтому он будет отправлять только событие со значением

0 голосов
/ 02 мая 2020

Если бы вы могли для типа go SomeType, одним из обходных путей было бы вызвать stopPropagation() в дочернем компоненте и отправить в target в качестве параметра события. Попробуйте следующее

Дочерний компонент 

export class ChildComponent implements OnInit {
  @Output() select = new EventEmitter();

  handleSomething(event) {
    event.stopPropagation();
    this.methodWhichEmits(event.target);
  }

  methodWhichEmits(value) {
    this.select.emit(value)
  }
}

Родительский компонент - Шаблон 

<app-child (select)=onSelect($event)></app-child>

Родительский компонент - Контроллер 

onSelect(target: any) {
  // handle target  
}

Если вы попытаетесь отправьте event непосредственно в качестве значения эмиттера, могут возникнуть нежелательные побочные эффекты из-за пузырьков событий.

0 голосов
/ 02 мая 2020

Пользовательские события Anguar не похожи на родные. Они просто объект, как вы заметили, они не распространяются, и их нельзя отменить.

...