Как вернуть значение из функции EventEmitter?

Я получил эту функцию в моем компоненте core:

 isValid(value: any) {

   // Do some stuff and return something based on the result

   return false;
 }

Что я передаю в other-component следующим образом:

<other-component (onBeforeAdding)="isValid($event)"></other-component>

И в other-component я получил эту функцию EventEmitter, которая должна работать перед другими вещами и возвращать значение, указывающее, что значение действительно или нет:

 @Output() onBeforeAdding: EventEmitter<any> = new EventEmitter();

 let isValid = this.onBeforeAdding.emit(value) || true;

 if (isValid) {

   // Do stuff
 }

Проблема здесь в том, что функция EventEmitter не может вернуть значение, так как она асинхронна (хотя из rc2 кажется, что это необязательно, передавая true функции new EventEmitter? Даже при этом не будет исправлено это выпуск однако). Таким образом, isValid всегда будет истинным, независимо от того, что возвращает функция.

Как вернуть значение из функции EventEmitter?

Ответы

Ответ 1

Короткий ответ: вы не можете сделать это с помощью @Output, но вы можете сделать что-то очень похожее с @Input.

Такая же функция в компоненте core:

isValid(value: any): boolean {
  // Do some stuff and return something based on the result
  return false;
}

Передайте определение функции в other-component как @Input:

<other-component [onBeforeAddingProcessor]="isValid"></other-component>

В other-component:

@Input() onBeforeAddingProcessor: (value: any) => boolean;

ngOnInit() {
  // onBeforeAddingProcessor won't be defined in the constructor
  let isValid = this.onBeforeAddingProcessor(value);

  if (isValid) {
    // Do stuff
  }
}

Способы доступа `this`

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

isValid = (value: any) => {
  return this.myService.checkValue(value);
}

В противном случае Angular вызывает метод с this компонента, а не потребитель компонента. Небольшой намек на производительность (хотя и не протестирован): если этот метод является большим и количество экземпляров компонента велико, то вы должны отделить большую часть кода от частной функции-члена и вызвать эту функцию из того места, где она была факторизован. Причина. Выше не создается функция на прототипе класса, но печатает копию этой функции для каждого экземпляра компонента. Это может потреблять много памяти, чего легко избежать.

Ответ 2

Вам нужно подписаться на эмитенте события, чтобы получить значение:

this.onBeforeAdding.emit(value || true);

this.onBeforeAdding.subscribe(isValid => {
  if (isValid) {
    // Do stuff
  }
});

Ответ 3

Функция emit отправляет широковещательный сигнал всем слушателям, передавая значение, которое вы определили. Я думаю, что логика isValid должна выделять событие, потому что ответственность EventEmitter - это события, которые не влияют на события. Как именно вы хотите записать этот поток isValid?

Ответ 4

Я бы предложил вам создать небольшой пример.

Но вот как я понимаю ваш вопрос.

Я думаю, вам нужно использовать другое свойство с EventEmitter, потому что вы пытаетесь получить возврат isValid() из основного компонента, а EventEmitter - это только односторонняя улица.

Итак, я бы создал наблюдаемую переменную и назначил другой компонент, чтобы он мог подписаться на нее. Когда isValid() выполнено, используйте next, чтобы опубликовать новое значение.

Простой пример: вы можете подписаться на valueChanges из элемента управления формой.

@Ответ на Исаак использует @input, но если вы хотите использовать наблюдаемое для этого, мое решение будет лучше соответствовать.