Пришло время поговорить об одной из лучших функций Angular 14: функции ввода. Я некоторое время изучал эту новую версию и могу сказать… Angular становится все лучше и лучше. Начиная с повышения производительности и заканчивая удобством использования для разработчиков, он становится отличной средой для работы.

Я написал статью об автономных компонентах, это тоже замечательная функция Angular 14. Загляните сюда!

Но давайте поговорим о функции ввода.

Что это такое?

Это новая функция, выпущенная в Angular 14, которая позволяет нам внедрять поставщиков (сервисы, токены, компоненты и т. д.) без использования класса конструктора. Это может быть удобно в те моменты, когда мы не используем класс — например, при создании фабричного провайдера.

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

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

Это действительно очень просто в использовании.

Вставка зависимостей в функции 👻

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

Давайте рассмотрим пример функции, которая внедряет службу Renderer и изменяет класс CSS элемента HTML.

Вы заметили?

createClassManager и getHost используют функцию внедрения. Это хороший способ абстрагировать код в функции. Раньше у нас были сервисы, которые помогали нам разбивать наш код на куски. Но теперь мы можем использовать функции, которые являются очень естественным способом работы в Javascript.

Где мы можем использовать эту функцию?

На основе угловой документации:

На практике вызовы inject() разрешены в конструкторе, параметре конструктора и инициализаторе поля.

Функция инъекции работает только внутри контекста инъекции. Мы можем вызывать его при создании экземпляра.

Инъекционные флаги 🚩

Еще одна приятная особенность функции внедрения — это новый способ использования флагов внедрения. Раньше при внедрении поставщика с помощью класса конструктора нам приходилось использовать декораторы, такие как @Host или @Optional, чтобы изменить поведение внедрения. Теперь, с функцией inject, нам просто нужно установить некоторые логические флаги, используя объект параметров в качестве второго параметра.

это намного проще, не так ли?

Используя инъекцию классом конструктора, нам пришлось бы использовать способ:

На мой взгляд, этот новый подход гораздо проще понять. В основном для тех, кто только начинает работать с Angular.

Должны ли мы прекратить использовать конструкторы классов с DI?

Ну, я так не думаю.

Хотя функция внедрения — отличная функция, это всего лишь новый подход. Нам не нужно рефакторить проекты из-за этого. Вероятно, конструкторы классов и функции внедрения будут двумя вариантами, которые будут сосуществовать долгое время.

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

👨‍💻

Вы можете проверить код этого поста на моем GitHub.

Вот и все!

Я потратил некоторое время на написание этого поста, надеюсь, вам понравилось!

Если вам понравилось, поставьте хлопки/лайки этому посту или поддержите меня в покупке кофе; мне очень поможет! 👏🏼❤

Спасибо за чтение. 😄

Увидимся! 👋🏼

Первоначально опубликовано на https://www.henriquecustodia.dev 10 октября 2022 г.