Есть ли какой-либо способ преобразовать событие, генерируемое дочерним компонентом, используя @output в наблюдаемый поток в родительском

#angular #rxjs #rxjs6 #rxjs-observables

#angular #rxjs #rxjs6 #rxjs-наблюдаемые

Вопрос:

Чтобы передать любой щелчок от дочернего элемента к родительскому, мы можем использовать @output в дочернем, а в родительском html мы можем прослушать это событие, используя способ, показанный ниже

<app-item-output (newItemEvent)=»addItem($event)»>

в parent мы можем написать метод addItem($event) и выполнить нашу работу, но есть ли какой-либо способ преобразовать его в stream, чтобы я мог использовать его в сочетании с другими наблюдаемыми.

Один из способов, о котором я могу думать сейчас, — это иметь subject в parent, а затем передавать значение, как показано ниже, для создания потока в parent

 addItem($event) {
subject.emit()
}

Но если у нас есть какой-либо прямой способ преобразовать событие, передаваемое дочерним компонентом, в наблюдаемое, это было бы лучше.

1. Возможно, вы захотите использовать службу для обработки сообщений между дочерним и родительским компонентами. Как вы говорите, создайте тему в службе, чтобы ваш дочерний элемент обновил данные, используя его метод «next», и подписался на родительский элемент или наоборот.

Ответ №1:

Вы можете добиться этого, используя декоратор ViewChild.

 <app-item-output #myChild></app-item-output>

 @ViewChild('myChild') myChild: ItemOutputComponent;

ngAfterViewInit() {
  this.myChild.newItemEvent.subscribe(
    event => /** do something **/
  );
}

Попробуйте описанное в stackblitz:

https://stackblitz.com/edit/angular-ivy-q9rcmk?file=src/app/app.component.ts

1. Да, в этом случае мне не нужен даже ‘@output ()’ то, что вы делаете таким образом, — это получение управления от дочернего элемента в родительском, но меня больше интересует знание любого прямого способа с помощью ‘@output()’ без ввода дочернего экземпляра в родительский.

2. Я не смог найти другого способа сделать это напрямую, поэтому продолжаю использовать подход @MoxxiManagarm