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-model 绑定的答案

您实际上可以这样做，只是您需要调用内部更改侦听器滴答(类似于摘要)来更新区域中的绑定，您可以为此添加一个 (keyup) 事件.同样，您也可以将指令绑定与 properties 组件设置字典一起使用.

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;
}

演示

更新 - 用于 2 路绑定的 ng-model

虽然 Angular2 默认是一次性绑定，但引入了 ngModel 糖来实现 2 路绑定.例如，您可以这样做:

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)来跟踪绑定元素中的 value 变化并分别更新绑定属性.例如:-

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:-

包括表单指令:

 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]
})

演示

另请阅读 Victor Savkin 撰写的关于 angular2 双向绑定的精彩文章创建 ng-model 事件及其工作原理.

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屋！