Angular2 将属性绑定到组件输入答案

【问题标题】：Angular2 bind property to Component InputAngular2 将属性绑定到组件输入
【发布时间】：2016-12-10 08:56:51
【问题描述】：

我有一个带有数字属性“数量”的对象“orderItem”。

为了显示，我绑定到“数量”-> {{orderItem.amount}}

增加和减少我想使用嵌套组件'inputNumberControl'的数量

将完整的 orderItem 传递给嵌套组件时

<input-number-control [item]="orderItem"></input-number-control>

并且在那里操纵一切工作的数量，如预期的那样，parentcopmonent 中的数量增加和减少。

我想更灵活地使用控件，只将属性传递给嵌套组件

<input-number-control [item]="orderItem.amount"></input-number-control>

但是父组件中的数量没有变化。

任何想法这种行为的原因是什么以及如何处理它？

数字控制组件的代码

export class InputNumberComponent{
    @Input() item:OrderItem;

decrementAmount()
{
    if(this.item.amount>1)this.item.amount--;
}
incrementAmount()
{
    this.item.amount++;
}
}

这很好用

    @Input() value:number;

decrementAmount()
{
    if(this.value>1)this.value--;
}
incrementAmount()
{
    this.value++;
}

没用

【问题讨论】：

在您的input-number-control 组件中如何更改item 的值？只给我看那个代码。
我会在原帖中添加它;)

标签： angular binding components

【解决方案1】：

如果您在 input-number-control 中更改 item 的值并希望在父级中反映相同的值（使用对象时），您可以使用 Anguar2 的双向数据绑定 [()] - @输入xxx； @Output xxxChange; 语法一起；

<input-number-control [(item)]="orderItem.amount"></input-number-control>

import {Input,Output,EventEmitter} from '@angular/core';

export class InputNumberComponent{
    @Input() item;                            //<-----Note - changed line
    @Output() itemChange=new EventEmitter();  

  decrementAmount()
  {
    if(this.item>1)
    this.itemChange.emit(this.item--);
  }
  incrementAmount()
  {
    this.itemChange.emit(this.item++);

  }
}

此演示不是由您的代码组成，而是由其相关的可以帮助您的代码。

演示：https://plnkr.co/edit/9D6UIZcI9Lc2EOJjsYy4?p=preview

【讨论】：