Я работаю над Angular 2 всего пару недель, поэтому старайтесь быть внимательным, пожалуйста, и, возможно, дать мне полезный совет? Спасибо. У меня есть основной компонент (pageComponent), который внутри его шаблона имеет два других меньших компонента (tableComponent и filterComponent), каждый со своими собственными функциями и свойствами. Как поймать событие, созданное в одном из дочерних компонентов, и передать его другому дочернему компоненту одного и того же родителя? Другими словами, как распространять и передавать события между двумя дочерними компонентами в одном шаблоне одного и того же родительского компонента?Angular 2 Child1-Parent-Child2 событие, распространяющееся
ответ
Я думаю, у вас здесь пара вариантов.
Первый дочерний компонент может излучать событие, используя декоратор @Ouput
, и имеют этот обработчик событий, который вызывает действие для родного брата.
E.g. компоненты одноуровневых
export class TableComponent {
@Output() anEvent: EventEmitter<any> = new EventEmitter<any>();
..
}
export class FilterComponent {
callMeWhenSomethingHappens($event){
..
}
}
Шаблон компонент родителя, который использует локальную переменную #theFilter
вызвать компонент фильтра, когда событие генерируется.
<app-filter #theFilter>
</app-filter>
<app-table (anEvent)="theFilter.callMeWhenSomethingHappens($event)">
</app-table>
Вы также можете посмотреть на использовании shared service если компоненты одноуровневых не имеют доступа друг к другу в шаблоне (например, если они созданы с помощью router-outlet
).
Вы можете использовать шаблон Flux. В основном, ваши компоненты подписываются на события, выставленные с вашего сервиса. Поскольку сервисы являются одноточечными, вы можете делиться данными, которые он предоставляет через компоненты, независимо от того, насколько они глубоки в дереве компонентов. Вот пример: How can I maintain the state of dialog box with progress all over my Angular 2 application?
- 1. Angular 2 - событие Click на меняющемся массиве
- 2. Ребенок прослушивает родительское событие в Angular 2
- 3. Событие с вкладкой Handle в Angular 2
- 4. Что такое `change` событие в Angular 2
- 5. ngFor и (click) событие Angular 2
- 6. Случайное событие Javascript, не распространяющееся на элемент внутри контекста iFrame
- 7. Уничтожить событие, не распространяющееся от модели Backbone to Backbone collection
- 8. Angular 2 event broadcast
- 9. angular 2: ngIf проблемы
- 10. События не распространяющееся по реакции компонентов
- 11. Angular - app start Событие
- 12. Angular 2 Navigation Events
- 13. событие keyup не поймано с помощью Angular 2 @HostListener
- 14. Angular 2 отправить событие от родителя ко всем детям
- 15. Событие Blur, не работающее для автозаполнения PrimeNG в Angular 2
- 16. Angular 2 Как добавить событие click с пустым шаблоном?
- 17. Как подписаться на событие DOMContentLoaded в Angular 2?
- 18. Вызывающее событие emitter внутри обещание в Angular 2
- 19. Событие ng-submit вызывается дважды в Angular 2
- 20. Как связать событие с элементом родителя с помощью Angular 2
- 21. Изменить событие с помощью jQuery datepicker и Angular 2
- 22. Ссылка Prefetching в Angular 2
- 23. Вызов динамической функции Angular 2
- 24. Angular 2 Recaptcha 2 Callback
- 25. Winwheel.js + Ionic 2 (Angular 2)
- 26. Обновление поля Angular 2 Fields
- 27. ionic 2 событие изменения страницы
- 28. Вид-направленное действие, распространяющееся на виды сестры
- 29. Вставить приложение Angular 2 в другое приложение Angular 2
- 30. Angular 2 + typscript или Angular 2 + Javascript, который рекомендуется
Хорошо, я не нужна услуга для распространения двух компонентов. Мне нужен один экземпляр для распространения своего события на другой компонент из одного и того же родительского компонента (что означает, что родительский компонент имеет две точки вставки и два дочерних компонента вставляются там, используя каждый свой собственный селектор). –
Компоненты брата не должны разговаривать друг с другом напрямую. Это создает связь между компонентом и его родителем, а также между компонентом и его родством. Со временем этот шаблон трудно поддерживать. Лучше всего распространять данные в одном направлении: компонент -> событие -> услуга -> распространять на подписанные компоненты – pixelbits