组件输入属性上的双向数据绑定 [英] Bidirectional data binding on a component input property

问题描述

我有一个应用程序实现一个这样的自定义组件：

$ b

 从'angular2 / core'导入{Component，Input} 
 @Component（{
 selector ：'my-comp'，
 template：`< input type =textstyle =text-align：center; [（ngModel）] =inputText>< p> {{inputText} } 
 
导出类MyComp {
 @Input（）inputText：string; 
} 
  

我正在尝试在我的组件的 inputText 变量上执行双向数据绑定像这样：

 < my-comp [（inputText）] =testString>< / my-comp> 
  

其中 testString 是一个定义在 MyApp.ts 其中包含一个字符串，我希望我的 testString 变量被修改w我的 inputText 被用户修改。

这是一个具有简单示例代码的Plunker： https://plnkr.co/edit/zQiCQ3hxSSjCmhWJMJph?p=preview

有没有办法使这项工作简单？我必须在自定义组件和重载函数上实现一个Angular2类，以使它像一个 ngModel 一样工作？我必须创建一个 inputTextChanged 变量 EventEmitter 类型，在更改数据时发出数据，并执行类似操作：

 < my-comp [inputText] =testString（inputTextChanged）=testString = $ event;> < / my-comp> 
  

提前谢谢。

解决方案

这是在模板语法文档中，在使用NgModel的双向绑定部分：

<输入[（ngModel）] =currentHero.firstName>

在内部，Angular将术语 ngModel ，到 ngModel 输入属性和 ngModelChange 输出属性。这是一个更一般的模式的具体示例，它将 [（x）] 与 x 输入属性匹配属性绑定和事件绑定的 xChange 输出属性。

我们可以编写自己的双向绑定指令/

另请注意， [ （x）] 只是属性绑定和事件绑定的语法糖：

  [x ] =someParentProperty（xChange）=someParentProperty = $ event
  

在你的情况下，

 < my-comp [（inputText）] =testString>< / my-comp> 
  

所以你的组件必须有一个 inputText 属性和 inputTextChange 输出属性（这是一个 EventEmitter ）。

 导出类MyComp {
 @Input（）inputText：string; 
 @Output（）inputTextChange：EventEmitter< string> = new EventEmitter（）; 
} 
  

只要您的组件更改 inputText ，发出一个事件：

  inputTextChange.emit（newValue）; 
  

---

在您的方案中，MyComp组件绑定输入属性 inputText 使用 [（x）] ngModelChange）通知更改，在该事件处理程序中，您通知父组件更改。

在其他情况下，ngModel isn不要使用，重要的是，只要属性 inputText 的值在MyComp中更改，则 emit（）组件。

I am trying to make something work on angular2 and I am unable to find something about this behavior.

I have an application that implements a custom component like this one :

import {Component,Input} from 'angular2/core'
    @Component({
      selector:'my-comp',
      template:`<input type="text" style="text-align:center; [(ngModel)]="inputText"> <p>{{inputText}}</p>`
    })

    export class MyComp{
      @Input() inputText : string;
    }

And I am trying to do a bidirectional databinding on my inputText variable from my component like this:

<my-comp [(inputText)]="testString"></my-comp>

Where the testString is a variable defined in the MyApp.ts which contains a string. I want my testString variable to be modified when my inputText is modified by the user.

Here is a Plunker with a simple sample code : https://plnkr.co/edit/zQiCQ3hxSSjCmhWJMJph?p=preview

Is there a way to make this works simply ? Do I have to implements an Angular2 class on my custom components and overload functions in order to make this works like an ngModel ? Do i necessarily have to create a inputTextChanged variable of EventEmitter type that emit my data when it's changed and do something like this :

<my-comp [inputText]="testString" (inputTextChanged)="testString = $event;"></my-comp>

Thank you in advance.

解决方案

This is explained in the Template Syntax doc, in the Two-Way Binding with NgModel section:

<input [(ngModel)]="currentHero.firstName">

Internally, Angular maps the term, ngModel, to an ngModel input property and an ngModelChange output property. That’s a specific example of a more general pattern in which it matches [(x)] to an x input property for Property Binding and an xChange output property for Event Binding.

We can write our own two-way binding directive/component that follows this pattern if we're ever in the mood to do so.

Note also that [(x)] is just syntactic sugar for a property binding and an event binding:

[x]="someParentProperty" (xChange)="someParentProperty=$event"

In your case, you want

<my-comp [(inputText)]="testString"></my-comp>

so your component must have an inputText input property and an inputTextChange output property (which is an EventEmitter).

export class MyComp {
  @Input()  inputText: string;
  @Output() inputTextChange: EventEmitter<string> = new EventEmitter();
}

To notify the parent of changes, whenever your component changes the value of inputText, emit an event:

inputTextChange.emit(newValue);

---

In your scenario, the MyComp component binds input property inputText using the [(x)] format to ngModel, so you used event binding (ngModelChange) to be notified of changes, and in that event handler you notified the parent component of the change.

In other scenarios where ngModel isn't used, the important thing is to emit() an event whenever the value of property inputText changes in the MyComp component.

这篇关于组件输入属性上的双向数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！