Eventemitter angular что это

Как правильно использовать EventEmitter?

Я тоже читал это вопрос где решение предлагает передать EventEmitter дочернему элементу и подписаться на него.

Тогда мой вопрос: должен ли я или не должен вручную подписываться на EventEmitter? Как мне его использовать?

4 ответа

TL; DR :

Нет, не подписывайтесь на них вручную, не используйте их в сервисах. Используйте их, как показано в документации, только для генерации событий в компонентах. Не побеждайте абстракцию angular.

Ответ:

Нет, не следует подписываться на него вручную.

[. ] EventEmitter на самом деле является абстракцией Angular, и его следует использовать в основном только для генерации пользовательских событий в компонентах. В противном случае просто используйте Rx, как если бы это была любая другая библиотека.

Это четко указано в документации EventEmitter.

Используйте директивы и компоненты для создания настраиваемых событий.

Что плохого в его использовании?

Все вышеизложенное более ясно видно в этой статье Уорда Белла comment (рекомендуется прочитать статью, а ответ на этот комментарий). Цитата для справки

НЕ рассчитывайте, что EventEmitter продолжит оставаться наблюдаемым!

НЕ рассчитывайте на присутствие этих наблюдаемых операторов в будущем!

Они скоро станут устаревшими и, вероятно, будут удалены перед выпуском.

Используйте EventEmitter только для привязки событий между дочерним и родительским компонентами. Не подписывайтесь на это. Не вызывайте ни один из этих методов. Звоните только eve.emit()

Его комментарий согласуется с комментарием Роба давным-давно.

Итак, как им правильно пользоваться?

Просто используйте его для отправки событий из вашего компонента. Взгляните на следующий пример.

Как не использовать?

Надеюсь, эти два простых примера прояснят правильное использование EventEmitter.

Нет: ноно и нет: да. Истина посередине. И нет причин для опасений из-за следующей версии Angular.

С логической точки зрения, если у вас есть компонент, и вы хотите сообщить другим компонентам о том, что что-то происходит, событие должно быть запущено, и это можно сделать так, как вы (разработчик) думаете, что это должно быть сделано. Я не вижу причины, по которой его не использовать, и не вижу причины, по которой следует использовать его любой ценой. Также имя EventEmitter подсказывает мне, что событие происходит. Обычно я использую его для важных событий, происходящих в Компоненте. Я создаю службу, но создаю файл службы внутри папки компонентов. Таким образом, мой служебный файл становится своего рода диспетчером событий или интерфейсом событий, поэтому я могу сразу понять, на какое событие я могу подписаться в текущем компоненте.

Если вы хотите иметь межкомпонентное взаимодействие, вам нужно знать, что такое @Input, @Output, EventEmitter и Subjects.

Если между компонентами существует связь родитель-потомок или наоборот, мы используем @input и @output с эмиттером событий.

@output испускает событие, и вам нужно передать его с помощью эмиттера событий.

Да, продолжайте и используйте его.

Как также указано в документах:

Использует Rx.Observable, но предоставляет адаптер для его работы, как указано здесь: https://github.com/jhusain / observable-spec

Как только эталонная реализация спецификации станет доступной, переключитесь на нее.

Часто бывает полезно иметь эмиттер, который отправляет события определенного типа. Если это ваш вариант использования, дерзайте. Если / когда доступна эталонная реализация спецификации, на которую они ссылаются, она должна быть заменой, как и любой другой полифилл.

Все жестко сформулированные предсказания гибели и мрака, похоже, проистекают из одного комментария Stack Overflow от одного разработчика к предварительной версии Angular 2.

Источник

Understanding @Output and EventEmitter in Angular

Angular is based on a one-directional data flow and does not have two-way data binding. So, how do you get a component to emit an event to another component?

Join the DZone community and get the full member experience.

In Angular, a component can emit an event using @Output and EventEmitter. Both are parts of the @angular/core.

Confused by the jargon? Let’s simplify it together. Consider the AppChildComponent as shown below:

appchild.component.ts

There’s a button in the AppChildComponent template which is calling the function handleclick. Let’s use the app-child component inside the App Compontent as shown below:

appcomponent.ts

Here we’re using AppChildCopmponent inside AppComponent, thereby creating a parent/child kind of relationship, in which AppComponent is the parent and AppChildComponent is the child. When we run the application with a button click, you’ll see this message in the browser console:

Using the Developer Console

So far, it’s very simple to use event binding to get the button to call the function in the component. Now, let’s tweak the requirement a bit. What if you want to execute a function of AppComponent on the click event of a button inside AppChildComponent?

To do this, you will have to emit the button click event from AppChildComponent. Import EventEmitter and Output from @angular/core.

Here we are going to emit an event and pass a parameter to the event. Consider the code below:

appchild.component.ts

Right now, we are performing the following tasks in the AppChildComponent class:

In the parent component, AppComponent, the child component, AppChildComponent, can be used as shown in the code below:

appcomponent.ts

Right now, we are performing the following tasks in the AppComponent class:

Getting Some Basic TypeScript Running

A Real-Time Example

Let’s take a real-time example to find out how @Output and EventEmitter can be more useful. Consider that AppComponent is rendering a list of products in a tabular form as shown in the image below:

Angular Front-End App

To create the product table above, we have a very simple AppComponent class with only one function: to return a list of products.

In the ngOnInit lifecycle hook, we are calling the getPrdoducts() function and assigning the returned data to the products variable so it can be used in the template. There, we are using the *ngFor directive to iterate through the array and display the products. See the code below:

With this code, products are rendered in a table as shown in the image below:

Now let’s say we want to add a new column with a button and input box as shown in the image below:

Our requirements are as follows:

To achieve this, let us create a new child component called StockStatusComponent. Essentially, in the template of StockStatusCompontent, there is one button and one numeric input box. In StockStatusCompontent:

Consider the code below:

stockstatus.component.ts

Let’s explore the above class line by line.

Here we are using the @Input decorator to read data from AppComponent class, which happens to be the parent class in this case. So to pass data from the parent component class to the child component class, use the @Input decorator.

In addition, we are using @Output with EventEmitter to emit an event to AppComponent. So to emit an event from the child component class to the parent component class, use EventEmitter with the @Output() decorator.

Therefore, StockStatusComponent is using both @Input and @Output to read data from AppComponent and emit an event to AppComponent.

Modify AppComponent to Use StockStatusComponent

Let us first modify the template. In the template, add a new table column. Inside the column, the component is used.

We are passing the value to productId and stock using property binding (remember, these two properties are decorated with @Input() in StockStatusComponent) and using event binding to handle the stockValueChange event (remember, this event is decorated with @Output() in StockStatusComponent).

In the function, we are using the JavaScript Array.prototype.find method to find a product with a matched productId and then updating the stock count of the matched product. When you run the application, you’ll get the following output:

Stay tuned for future articles where we go into more depth on other features of Angular!

If you enjoyed this article and want to learn more about Angular, check out our compendium of tutorials and articles from JS to 8.

Opinions expressed by DZone contributors are their own.

Источник

What is the proper use of an EventEmitter?

I’ve read questions like Access EventEmitter Service inside of CustomHttp where the user uses EventEmitter in his service, but he was suggested in this comment not to use it and to use instead Observables directly in his services.

I also read this question where the solution suggests to pass the EventEmitter to the child and subscribe to it.

My question then is: Should I, or should I not subscribe manually to an EventEmitter? How should I use it?

6 Answers 6

TL;DR:

No, don’t subscribe manually to them, don’t use them in services. Use them as is shown in the documentation only to emit events in components. Don’t defeat angular’s abstraction.

Answer:

No, you should not subscribe manually to it.

EventEmitter is an angular2 abstraction and its only purpose is to emit events in components. Quoting a comment from Rob Wormald

[. ] EventEmitter is really an Angular abstraction, and should be used pretty much only for emitting custom Events in components. Otherwise, just use Rx as if it was any other library.

This is stated really clear in EventEmitter’s documentation.

Use by directives and components to emit custom Events.

What’s wrong about using it?

Angular2 will never guarantee us that EventEmitter will continue being an Observable. So that means refactoring our code if it changes. The only API we must access is its emit() method. We should never subscribe manually to an EventEmitter.

All the stated above is more clear in this Ward Bell’s comment (recommended to read the article, and the answer to that comment). Quoting for reference

Do NOT count on EventEmitter continuing to be an Observable!

Do NOT count on those Observable operators being there in the future!

These will be deprecated soon and probably removed before release.

Use EventEmitter only for event binding between a child and parent component. Do not subscribe to it. Do not call any of those methods. Only call eve.emit()

His comment is in line with Rob’s comment long time ago.

So, how to use it properly?

Simply use it to emit events from your component. Take a look a the following example.

How not to use it?

Stop right there. you’re already wrong.

Hopefully these two simple examples will clarify EventEmitter’s proper usage.

Yes, go ahead and use it.

EventEmitter is a public, documented type in the final Angular Core API. Whether or not it is based on Observable is irrelevant; if its documented emit and subscribe methods suit what you need, then go ahead and use it.

As also stated in the docs:

Uses Rx.Observable but provides an adapter to make it work as specified here: https://github.com/jhusain/observable-spec

Once a reference implementation of the spec is available, switch to it.

So they wanted an Observable like object that behaved in a certain way, they implemented it, and made it public. If it were merely an internal Angular abstraction that shouldn’t be used, they wouldn’t have made it public.

There are plenty of times when it’s useful to have an emitter which sends events of a specific type. If that’s your use case, go for it. If/when a reference implementation of the spec they link to is available, it should be a drop-in replacement, just as with any other polyfill.

Just be sure that the generator you pass to the subscribe() function follows the linked spec. The returned object is guaranteed to have an unsubscribe method which should be called to free any references to the generator (this is currently an RxJs Subscription object but that is indeed an implementation detail which should not be depended on).

All of the strongly-worded doom and gloom predictions seem to stem from a single Stack Overflow comment from a single developer on a pre-release version of Angular 2.

If the relation between components is parent- child or vice versa we use @input & @output with event emitter..

@output emits an event and you need to emit using event emitter.

If it’s not parent child relationship.. then you have to use subjects or through a common service.

If the relation between components is parent- child or vice versa we use @input & @output with event emitter..

@output emits an event and you need to emit using event emitter.

If it’s not parent child relationship.. then you have to use subjects or through a common service

There is no: nono and no: yesyes. The truth is in the middle And no reasons to be scared because of the next version of Angular.

From a logical point of view, if You have a Component and You want to inform other components that something happens, an event should be fired and this can be done in whatever way You (developer) think it should be done. I don’t see the reason why to not use it and i don’t see the reason why to use it at all costs. Also the EventEmitter name suggests to me an event happening. I usually use it for important events happening in the Component. I create the Service but create the Service file inside the Component Folder. So my Service file becomes a sort of Event Manager or an Event Interface, so I can figure out at glance to which event I can subscribe on the current component.

I know..Maybe I’m a bit an old fashioned developer. But this is not a part of Event Driven development pattern, this is part of the software architecture decisions of Your particular project.

Some other guys may think that use Observables directly is cool. In that case go ahead with Observables directly. You’re not a serial killer doing this. Unless you’re a psychopath developer, So far the Program works, do it.

Источник

Шаблоны коммуникаций в Angular

Angular следует двусторонней схеме потока данных, то есть вы можете отправлять данные вверх и вниз по дереву компонентов. Поскольку все в Angular является компонентом, понимание связи между компонентами имеет решающее значение для каждого успешного проекта Angular.

В этом посте я расскажу обо всех способах взаимодействия между компонентами. Вот темы, которые мы пройдем:

Пример проекта

Вот пример проекта, поэтому вы можете увидеть все коммуникации в действии. Вы можете клонировать этот проект, чтобы протестировать его на своей машине.

Основы компонентов

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

Angular следует шаблону проектирования компонентов, что означает, что в Angular все является компонентом. Все ваше приложение разделено на модули, и каждый модуль можно разделить на небольшие, повторно используемые компоненты. Если вы посмотрите на диаграмму ниже, мы определили три модуля, и каждый модуль имеет несколько компонентов. Эта модульная система помогает быстрее загружать приложение, так как в браузере загружаются только необходимые модули.

Модуль

Компонент

Каждый компонент имеет три важных файла: файл класса app.component.ts для логики, html-файл app.component.html для представления и файл CSS app.component.css для стилей.

Обратите внимание на selector в приведенный выше файле. Значение, app-root используется для размещения компонента в DOM следующим образом:

Интерполирование

Привязка свойств

Привязка событий

Разобравшись немного с основами, давайте погрузимся в модели коммуникации в Angular.

Общение родителей с потомками

Давайте посмотрим, как мы можем передавать информацию из родительского компонента в дочерний компонент. У нас есть заголовок, который будет передан из родительского компонента (app) в дочерний (header) компонента.

Мы определяем title в компоненте app, как показано ниже. Посмотрим, как мы передадим этот title компоненту header.

У нас есть @Input() headerTitle в компоненте header, и мы используем привязку свойства [headerTitle] в компоненте app, чтобы передать title.

Итак, с помощью декоратора @Input() мы можем передавать данные дочернему компоненту.

Общение потомка с родителем

Давайте посмотрим, как мы передаем информацию из дочернего компонента в родительский.

У нас есть декоратор @Output и класс EventEmitter для отправки информации из дочернего компонента в родительский.

Связь одноуровневых компонентов с помощью сервисов

Компоненты на одном уровне называются родственными компонентами. В нашем примере Header и Footer являются родственными компонентами. В этом разделе давайте посмотрим, как мы можем общаться между одноуровневыми компонентами с помощью сервисов.

Давайте посмотрим это в действии. У нас есть ссылки в Header и те же ссылки в Footer. Но у нас нет ссылки на dashboard в Footer, потому что пользователь не вошел в систему.

При нажатии на ссылку Login в заголовке пользователь входит в систему и ссылка Login меняется на Logout. Нам нужно связаться с Footer, чтобы он отображал ссылку на dashboard и Logout вместо Login. Ниже приведено состояние после нажатия на ссылку Login:

Вот пример нашего сервиса. Мы определяем параметр isUserLoggedIn и setUserLoggedIn метод:

Вот компоненты Footer и Header. Я удалил другой код для краткости. Мы внедрили сервис в обоих компонентах и ​​используем его в компоненте Header для отправки данных a в Footer для получения данных.

Связь с помощью EventEmitter

В приведенном выше разделе мы увидели, как мы можем общаться между одноуровневыми компонентами с помощью сервисов. Давайте посмотрим, как мы можем сделать то же самое с EventEmitter.

Если мы посмотрим на диаграмму ниже, мы отправим данные с помощью EventEmitter в компонент App. Мы устанавливаем свойства app с данными, полученными из Header. Как только свойства app установлены, Footer получает данные в качестве входных данных.

Заголовок отправляет событие setLoggedInFlag и loginFlag передается в Footer:

Вот компонент Footer с геттерами и сеттерами для @Input, чтобы найти изменения:

Связь с использованием декоратора @ViewChild

@ViewChild является одним из распространенных декораторов, которые мы используем в Angular. При этом мы можем получить ссылку на пользовательский компонент, запросив шаблон.

Вот дочерний компонент:

Когда мы размещаем parent компонент в компоненте app:

Общение с использованием контент-проекции

Это код для app-welcome-message компонента HTML:

Мы можем спроектировать контент на компоненты с помощью ng-content :

Вот вывод в браузере:

Связь с NGRX Store

Связь с NGRX Store

Связь с NGRX Store в деталях

Давайте рассмотрим наиболее важные аспекты того, как данные на самом деле передаются в NGRX Store.

Поток данных с NGRX Store

Вот пример. В нижней части файла расположены селекторы, которые представляют собой специальные функции, которые дают вам определенный фрагмент состояния:

Связь между модулями

Все приложение Angular разделено на модули, основанные на функциях приложения. Иногда нам также необходимо общение между модулями.

Есть несколько способов сделать это.

NGRX Store

Как мы уже говорили ранее, мы можем подписаться на store из компонентов и обмениваться данными. Любой компонент из любого модуля, который может получить доступ к хранилищу и отправить action, получает данные.

Посмотрите на диаграмму ниже. Мы можем отправить действие из компонента A в Модуль A с данными, чтобы внести изменения в состояние NGRX. Компонент B из модуля B подписывается на хранилище и получает эти данные по мере изменения состояния.

Связь между модулями с NGRX Store

Общий модуль

У нас может быть общий модуль, который импортируется в другие Модули, и мы используем сервисы для обмена данными. Как вы можете видеть на следующей диаграмме, у нас есть общий модуль с сервисами, в котором могут использоваться все модули, при условии, что мы импортируем общий модуль в функциональные модули.

Связь между модулями с помощью общего модуля

Резюме

Заключение

Поток данных важен в одностраничных приложениях. Понимание этих шаблонов коммуникации имеет решающее значение для успеха вашего проекта. Без этих базовых концепций вы получите «спагетти код»: его трудно отлаживать, читать и расширять.

Источник