Angular2双向数据绑定 [英] Angular2 two-way data binding

问题描述

我知道Angular2不具有双向数据绑定，但有没有办法致力于模拟双向数据Angular1.x绑定行为？

I know Angular2 doesn't have two-way data binding but is there a way to mimick the two-way data binding behavior from Angular1.x?

推荐答案

的注 - 向下滚动NG-模型绑定的答案的

其实你可以这样做，只是你需要调用内部的ChangeListener打勾（类似于消化）来更新区的结合，你可以只添加一个（KEYUP）事件的。同样，您可以使用指令绑定以及与属性的组件设置字典。

You could actually do that, just that you need to invoke internal changelistener tick (similar to digest) to update binding in the zone, You can just add a (keyup) event for that. Similarly you could use directive bindings as well with properties dictionary of component settings.

例如： -

<input #label (keyup)> 
<!-- variable #label represented as the element itself and accessible as property on controller instance 
 You can even bind keyup to a function or another another function and pass value from the label property-->

显示为：

<p>{{label.value}}</P>

父组件有一个文本框和一个标签。

Parent Component has a textbox and a label.

import { ComponentAnnotation as Component, ViewAnnotation as View, bootstrap} from 'angular2/angular2';
import {Display} from 'display';

@Component({
  selector: 'my-app'
})

@View({
  template: `<p><b>Parent Component:</b><p><input #label (keyup) (change)="handleChange(label.value)">
        <p>{{label.value}}</P> <display [text]="label"></display></p></p>`,
  directives: [Display]
})

class MainComponent {
  label: any;

  constructor() {

  }

  handleChange(label){
    this.label = label;
    console.log(this.label);
  }

}

现在在子组件显示它还有：

Now displaying it in child component as well:

@Component({
  selector: 'edit',
  properties: { text: 'text' } //<-- property binding
})

@View({
  template: `<p><b>Child Component:</b></p>{{text.value}}`
})

export class Edit {
    text:any;
}

演示

Demo

更新 - NG-模型2路结合

虽然Angular2默认绑定一次， NG-模型糖已被引入到实现2路绑定。有了，你可以，例如做的：

Though Angular2 is one-time bound by default, ng-model sugar has been introduced to achieve 2-way binding. With that you could do for instance:

<input ng-control="name" [(ng-model)]="name">

下面括号（ [..] ）的使用说明的属性绑定和圆括号（（..））的事件绑定。基本上，当你使用 NG-模型，要启用两者绑定NG-模型更多的是一种事件。幕后它创建了一个可观察到的事件（与EventEmitter）跟踪值绑定元素修改和更新各自的绑定属性。
例如： -

Here usage of square brackets ([..]) suggests the property binding and round brackets ((..)) for event binding. Basically when you use ng-model, you are enabling both the bindings ng-model is more of an event. Behind the scenes it creates an observable event(with EventEmitter) to track the value changes in the bound element and update the bound property respectively. For example:-

包含formDirectives：

Include formDirectives:

 import {formDirectives} from 'angular2/forms';

和与形式

   <form (ng-submit)="onSubmit()" #f="form">
      <input ng-control="name" [(ng-model)]="name">
      <button>Click me and check console</button>
   </form>

不形

  <input  [(ng-model)]="name">
  <button (click)="onSubmit()">Click me and check console</button>

包括针对注释formDirectives依赖。

include formDirectives dependency in view annotation.

@View({
  template: .....,
  directives: [formDirectives]
})

演示

Demo

另请阅读href=\"http://victorsavkin.com/post/119943127151/angular-2-template-syntax\" rel=\"nofollow\">从维克多Savkin 上双漂亮的写了

Also read the nice write up from Victor Savkin on Two-way binding in angular2 by creating the ng-model event and how it works.

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