将整数绑定到 AngularJS 1.5 组件答案

【问题标题】：Binding an integer to AngularJS 1.5 component将整数绑定到 AngularJS 1.5 组件
【发布时间】：2017-06-17 04:56:37
【问题描述】：

在组件中使用属性绑定时，传递给控制器的数据始终是字符串。但是，我正在尝试传递一个整数，并且无法将其从字符串转换并使用转换棒。

我尝试将数据保存为$onInit() 中的整数，但在此函数之外，数据会返回到其原始状态（类型和值）。我理解组件一般不应该修改传入的数据，但是由于这是一个属性绑定，并且数据是按值传递的，所以我认为不适用。

function IntegerBindingController() {
  this.$onInit = function() {
    // Assuming 'number="2"' in the HTML
    // This only changes the data inside this function
    this.number = parseInt(this.number)
    this.typeofNumber = typeof this.number // evaluates to 'number'
    this.simpleAdd = this.number + 5 // evaluates to 7
    this.dataAdd = this.numberOneWay + 5
    console.log(this)
  }

  this.test = function() {
    // this.number is a string inside this function
    this.typeofNumber = typeof this.number // evaluates to 'string'
    this.simpleAdd = this.number + 5 // evaluates to 25
  }
}

我可以通过将数据复制到控制器上的新属性来解决这个问题，但我很好奇是否有人可以解释这里发生了什么。有关该问题的工作示例，请参阅此 Plunker。

【问题讨论】：

标签： angularjs components angularjs-bindings

【解决方案1】：

使用 '@' 传递数字将始终将其作为字符串传递。如果您希望在组件绑定中使用 '=' 而不是对象值传递编号。

所以：

var IntegerBindingComponent = {
  controller: IntegerBindingController,
  bindings: {
   string: '@',
   number: '=',
   numberOneWay: '<'
 },
 template: _template
}

可以在这里找到一个不错的解释：http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/

或在这里：Need some examples of binding attributes in custom AngularJS tags

“'=' 表示法基本上提供了一种将对象传递到指令中的机制。它总是从指令的父范围中提取它......”

【讨论】：

我认为组件与指令的要点之一是使用单向绑定 (<) 而不是双向 (=)？无论如何，使用< 确实有效，但问题仍然是为什么在$onInit() 中更改this.number 仅在该函数的范围内生效。此外，目标是能够通过模板传入一个整数，而不必先创建一个对象。

【解决方案2】：

我最终采用的解决方案是使用$onChanges 来处理绑定的数据值。就我而言，在父组件中进行异步调用后，至少其中一个值可能会发生变化，因此总体而言这是有意义的。正如上面的 Prinay Panday 所指出的，@ 绑定总是以字符串的形式出现。 $onInit() 方法保证绑定可用，但不保证它们会改变，所以即使你改变了组件上的值，Angular 也可以在以后改变它。这是文档建议在需要操作绑定值时将绑定值复制到局部变量的另一个原因。至于$onChanges() 的解决方案，应该是这样的

function IntegerBindingController() {
  this.$onChanges(changes) {
    if (changes.number && changes.number.currentValue) {
        this.number = parseInt(changes.number.currentValue)
    }
  }

  this.test = function() {
    this.typeofNumber = typeof this.number // evaluates to 'number'
    this.simpleAdd = this.number + 5 // evaluates to 7 (assuming this.number was 2)
  }
}

【讨论】：