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

Давайте создадим select компонент, который получает входные данные size и placement.

Использование входов

Первый метод, с которым мы все знакомы, - это использование декоратора Input:

Это отлично работает, но не так гибко. Допустим, мы хотим установить для входа size значение large для любого select в нашем приложении. Используя этот метод, мы не можем этого сделать. Мы должны позволить потребителю отменять любой ввод на глобальном уровне.

Использование внедрения зависимостей

Для этого мы можем использовать функцию внедрения зависимостей Angular:

Во-первых, нам нужно создать поставщика конфигурации. Этот провайдер может использоваться как token, type, а также предоставляет значения по умолчанию для каждого input. Давайте воспользуемся этим в нашем select компоненте:

Теперь мы можем переопределить inputs выбора на уровне приложения:

Но это не все. Мы также можем использовать его для предоставления различных inputs на уровне компонентов. Допустим, у нас есть страница, на которой компонент используется несколько раз. В каждом из них нам нужно использовать размер small:

Мы можем добавить его к компоненту providers, и он будет использоваться для любых компонентов, объявленных в его шаблоне и его дочерних элементах. Мы все еще можем переопределить его с помощью прямого input, если нам нужно:

Та же стратегия применяется к ленивым модулям, поскольку они создают новый инжектор.

Использование директив

Допустим, у нас есть компонент с множеством входов. Во многих местах (не во всех), где мы его потребляем, мы используем один и тот же набор значений. Если мы воспользуемся нашим примером, это будет примерно так:

Мы можем повторяться в каждом месте или создать директиву, которая предоставляет эту конфигурацию и служит нашим единственным источником истины:

И мы можем использовать его там, где нам нужно:

Пожалуйста, придумайте лучшее название для директивы 😀

Вы можете поиграть с кодом в ng-run.

🚀 На случай, если вы это пропустили

Вот несколько моих проектов с открытым исходным кодом:

  • Акита: государственное управление, специально разработанное для JS-приложений
  • Spectator: мощный инструмент для упрощения ваших угловых тестов
  • Transloco: библиотека интернационализации Angular
  • Менеджер форм: основа правильного управления формами в Angular
  • Кешью: гибкая и простая библиотека, которая кэширует HTTP-запросы.

И многое другое! Касса ngneat.

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