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 tick（类似于digest）更新区域中的绑定，您可以为其添加一个（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 { Component, bootstrap} from '@angular/core';
import {Display} from 'display';

@Component({
  selector: 'my-app',
  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',
  template: `<p><b>Child Component:</b></p>{{text.value}}`
})

export class Edit {
    @Input() text:any;
}

演示

Demo

双向绑定的更新 - 模型

尽管Angular2默认是一次性绑定， ngModel 糖已经被引入实现双向绑定。你可以这样做：

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

<input ngControl="name" [(ngModel)]="name">

这里使用方括号（ [..] ）建议用于事件绑定的属性绑定和圆括号（（..））。基本上当您使用 ng-model 时，您启用了绑定 ngModel 更多的是一个事件。在幕后，它创建一个可观察事件（使用 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 ngModel 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 {FORM_DIRECTIVES} from '@angular/common';

和表单

   <form (ngSubmit)="onSubmit()" let-f="form">
      <input ngControl="name" [(ngModel)]="name">
      <button>Click me and check console</button>
   </form>

无表单

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

不再需要
在视图注释中包含formDirectives依赖。

not necessary anymore include formDirectives dependency in view annotation.

@Component({
  template: .....,
  directives: [FORM_DIRECTIVES]
})

strong> 演示

Demo

另请阅读通过创建ng模型，从Victor 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屋！