Angular 2 интересен всеми связями между компонентами, сервисами и многим другим.
Недавно я читал этот блог, это дает хорошее представление о том, как работают охранники маршрута. Еще одна интересная деталь, которую я заметил в живом примере, заключалась в том, как управлять предупреждениями и сообщениями об ошибках. Я разработал собственный plunkr, чтобы поиграть. Ссылка здесь". Компоненты объяснены на изображении ниже.
Здесь 4 компонента. Компонент приложения является родительским, который содержит два дочерних компонента — дочерний1 и дочерний2. AlertComponent отображает предупреждающие сообщения. Существует AlertService, который отслеживает любые предупреждающие сообщения, отправленные компонентами, и AlertComponent подписывается на эту службу, чтобы получать и отображать последние предупреждающие сообщения.
Интересно, что все 4 компонента используют AlertService, но давайте посмотрим, какой экземпляр AlertService получает каждый компонент посредством внедрения зависимостей.
AlertService для компонентов App, Child1 и Child2
AppComponent и Child1Component используют экземпляр AlertService, внедренный в них глобальным провайдером в AppModule, поскольку они не определяют провайдера сами по себе. Принимая во внимание, что Child2Component перечисляет своего собственного поставщика для AlertService. (Обратите внимание, что у него есть собственный тег «providers» в декораторе @NgModule). Поэтому AppComponent и Child1Component совместно используют один и тот же экземпляр AlertService(a1), а Child2Component получает совершенно новый экземпляр AlertService (a2).
AlertService для AlertComponent
AlertComponent встроен во все компоненты как дочерний компонент, как ‹alert›‹/alert›. Это означает, что экземпляр AlertService (a1 или a2), полученный этим компонентом, будет получен от соответствующего родителя. Это объясняет, почему отображаемое «время» различается между приложением/дочерним элементом1 и дочерним элементом2. Это основано на иерархии внедрения зависимостей Angular 2.
Пропуск иерархии для доступа к экземпляру родительской службы
Поскольку child2 предоставляет свой собственный AlertService, согласно иерархии внедрения зависимостей, он получает новый экземпляр AlertService (a2). Я хотел проверить, как я могу получить доступ к экземпляру a1 из child2. После некоторых попыток мне удалось добиться этого с помощью другого сервиса под названием CommonService. Этот CommonService получает a1 и перечисляет некоторые операции над ним. Child2 получает экземпляр этого CommonService(c1) и обращается к a1 через его методы.
Интересно играть с Angular 2. Надеюсь узнать больше.
:)
