🚀 Раскройте всю мощь функций DI в Angular

Мы можем использовать функцию Angular inject(), чтобы получить ссылку на токен из активного в данный момент инжектора. Мы можем использовать его в factory провайдерах или сервисах, например:

Подробнее о InjectionToken поставщиках фабрик можно прочитать в этой статье:

Начиная с Angular v14, мы также можем использовать функцию inject() в компонентах, директивах и каналах. Он открывает целый новый мир возможностей. Используя систему DI, мы можем создавать повторно используемые функции. Мне нравится называть это функция DI:

Например:

Вот еще один пример, который возвращает наблюдаемую на основе параметра запроса timespan:

Angular также добавил хук с именем onDestroy в ViewRef, где мы можем зарегистрировать нашу логику очистки. Таким образом, теперь мы можем создавать мощные вещи, такие как untilDestroyed:

Мы также можем использовать NodeInjector:

Его можно использовать для обеспечения более чистого и надежного подхода для авторов библиотек:

Это, несомненно, очень мощная функция, но давайте посмотрим и на минусы.

Во-первых, inject() можно вызывать только в constructor, поэтому мы не можем использовать inputs компонента. Мы можем обойти это, используя closures, но получили ли мы что-нибудь?

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

И последнее, но не менее важное: это может показаться магией (похоже на хуки React), а я не слишком люблю магию, в отличие от моих детей 😄

Заключительные мысли

Это очень интересная функция. Я до сих пор не уверен, как я к этому отношусь, но нам придется подождать и посмотреть, как это воспримет сообщество.

Подпишитесь на меня в Medium или Twitter, чтобы узнать больше об Angular и JS!