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%;
}

我正在考虑创建一个Input模块并使用它，而不是重复代码

<my-input placeholder="foo">

我的问题是：

创建基本UI组件的模块是一种好的做法吗？（使用模块是所有其他模块可以导入和使用的唯一方法）

我看到的所有示例应用程序仅使用默认的<input>，但我不确定为什么。

谢谢。

Answer 1

谈到角度-是的。 Angular是基于组件的框架。这就是我们在项目中的工作方式。我们有一个用于通用组件的基本模块。

myapp.common

我有很多自定义组件。

myapp.common.input

myapp.common.select

查看what AngularJS团队的建议：

虽然上面的示例很简单，但不会扩展到很大   应用程序。相反，我们建议您将申请中断   这样的多个模块：


每个功能的模块

每个可重用组件的模块（尤其是指令和过滤器）

还有一个依赖于以上模块并包含任何初始化代码的应用程序级模块。

这是我的输入组件的外观：

(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>`,
    });
}());

要将自定义组件ngModel绑定到输入模型，需要使用$onInit中的小片段。

所以现在我只用这个

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

这里有一些好处：

所有组件看起来都一样，您不怕忘记课堂或其他东西
易于扩展-您已经有了一个组件，所有代码都集中在一个地方。
易于编写单元测试-您只需将myapp.custom.input包含到测试套件中，并确保您测试了这种完全和平的代码
易于更改设计-您只需将其更改为一个位置，更改将自动应用于整个项目。

自定义输入模块在Angular中是一种好习惯吗？

1 个答案: