Является ли пользовательский модуль ввода хорошей практикой в ​​Angular?

Question

Приложение, которое я создаю, все входные данные выглядят одинаково (с точки зрения дизайна).

Я чувствую, что каждый раз повторяю себя со следующими строками:

HTML

<div class="myInputContainer">
  <input
    type="text"
    class="myInputView-input"
    aria-label="login_email"
    placeholder="Filter Menu Items..."/>
</div>

CSS

.myInputContainer {
  @extend %input-like-container;
}

.myInputView-input {
  @extend %input-like;
  width: 100%;
}

Я подумываю создать модуль ввода и использовать его вместо повторяющегося кода

<my-input placeholder="foo">

Мой вопрос:

Это хорошая практика для создания модуля базового компонента пользовательского интерфейса?(Использование модуля - единственный способ, которым все другие модули могут импортировать и использовать его)

Все примеры приложений, которые я вижу, используют только значение по умолчанию <input>, и я не совсем уверен, почему.

Спасибо.

Answer 1

Говоря об угловых - да.Angular - это основанная на компонентах структура.Итак, вот как мы делаем в нашем проекте.У нас есть базовый модуль для общих компонентов.

myapp.common

У меня есть несколько пользовательских компонентов.

myapp.common.input

myapp.common.select

Посмотрите , что команда AngularJS предлагает:

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

1. Модуль для каждой функции
2. Модуль для каждого повторно используемого компонента (особенно директив и фильтров)
3. И модуль прикладного уровня, который зависит от указанных выше модулей и содержит любой код инициализации.

Вот как выглядит мой компонент ввода:

(function () {
  /* @ngInject */
  function InputComponent() {
    const ctrl = this;

    ctrl.$onInit = function () {
      ctrl.ngModel.$render = function () {
        ctrl.innerModel = ctrl.ngModel.$viewValue;
      };
      ctrl.onChange = function () {
        ctrl.ngModel.$setViewValue(ctrl.innerModel);
      };
    };
  }

  angular
    .module('myapp.common.input')
    .component('myappInput', {
      controller: InputComponent,
      require: {
        ngModel: 'ngModel',
      },
      bindings: {
        placeholder: '@',
        type: '@',
        title: '@',
      },
      template:
        `<div class="form-group">
          <label class="myapp-input-title">
            {{ ::$ctrl.title }}
          </label>
          <input
            ng-model="$ctrl.innerModel"
            ng-change="$ctrl.onChange()"
            placeholder="{{ ::$ctrl.placeholder }}"
            type="{{ ::$ctrl.type }}"
         </div>`,
    });
}());

Небольшой фрагмент в $onInit необходим для привязки пользовательского компонента ngModel к модели ввода.

Так что теперь я просто использую это

<myapp-input ng-model='modelName'></myapp-input>

Вот некоторые преимущества:

1. Все ваши компоненты выглядят одинаково, вы не боитесь забыть класс или что-то еще
2. Простота расширения - у вас уже есть компонент и весь его код сосредоточен в одном месте.
3. Легко писать модульные тесты - вы просто включаете myapp.custom.input в набор тестов и убедитесь, что тестируете этот точный кодовый код
4. Легко изменить дизайн - вам просто нужноизмените его в одном месте, и изменения будут автоматически применены ко всему проекту.