Пришло время поговорить об одной из лучших функций 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 г.