Question

在AngularJS >1.5中，几个相关组件如何共享一个具有通用功能的公用控制器，同时又能够为每个不同的组件提供自定义行为？

例如，为不同类型的<input>元素（text，number，date ...）实现组件，每个控制器将共享相同的功能（以传播例如，将值更改为父级的组件值），因此可以为控制器编写一个函数并将其用于所有函数。但是如果某些类型需要自定义行为。如何检测控制器属于哪个组件？

这是一些伪代码：

var commonController = function() {

    this.$onInit = function() {
        // common code for all types

        // code for a specific type
        // how can I detect here which component is running?
    }
}

angular.module('app')
.component('component01', {
    controller: commonController),
    ...
})
.component('component02', {
    controller: commonController),
    ...
})
.component('component03', {
    controller: commonController),
    ...
})

Answer 1

我认为您可以通过将所有所需的输入类型组合到单个公共输入组件中并提供该类型作为对该组件的绑定来完成此操作。然后，在CommonController中，您可以根据设置的输入类型显示/处理更改。

我在下面添加了一个片段，该片段应该可以完成与您所寻找的内容类似的操作。通知父组件将需要在您的绑定中添加一个回调处理程序，您可以将更新后的值和输入类型传递给该回调处理程序。

angular.module('tester', []);

angular.module('tester').component('commonInput', {
  bindings: {
    inputType: '<'
  },
  controller: CommonController,
  template: `
    <div ng-switch on="$ctrl.inputType">
      <input ng-switch-when="text" type="text" ng-model="$ctrl.text" ng-change="$ctrl.onTextChange()"/>
      <input ng-switch-when="date" type="date" ng-model="$ctrl.date" ng-change="$ctrl.onDateChange()"/>
      <input ng-switch-when="number" type="number" ng-model="$ctrl.number" ng-change="$ctrl.onNumberChange()"/>
    </div>
  `
});

function CommonController() {
  this.$onInit = function() {
    console.log('input type:', this.inputType);
    this.text = '';
    this.date = null;
    this.number = null;
  };
  
  this.onTextChange = function() {
    console.log(this.text);
  };
  
  this.onDateChange = function() {
    console.log(this.date);
  };
  
  this.onNumberChange = function() {
    console.log(this.number);
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>

<div ng-app="tester">
  <common-input input-type="'text'"></common-input>
  <common-input input-type="'date'"></common-input>
  <common-input input-type="'number'"></common-input>
</div>

如何与具有自定义行为的多个组件共享AngularJS控制器

1 个答案: