Question

我知道Angular2没有双向数据绑定，但有没有办法模仿Angular1.x的双向数据绑定行为？

Answer 1

注意 - 向下滚动ng-model binding的答案

您实际上可以这样做，只需要调用内部changelistener tick（类似于摘要）来更新区域中的绑定，您只需为此添加__name__事件即可。类似地，您也可以使用指令绑定以及组件设置的(keyup)字典。

实施例： -

properties

显示为：

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

现在也在子组件中显示它：

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

}

<强> Demo

更新 - 用于双向绑定的ng-model

虽然Angular2默认是一次性绑定，但已引入@Component({ selector: 'edit', template: `<p><b>Child Component:</b></p>{{text.value}}` }) export class Edit { @Input() text:any; }糖来实现双向绑定。你可以做到这一点：

ngModel

这里使用方括号（<input ngControl="name" [(ngModel)]="name">）表示事件绑定的属性绑定和圆括号（[..]）。基本上，当您使用(..)时，您正在启用两个绑定ng-model更多的是一个事件。在幕后，它创建了一个可观察的事件（使用ngModel）来跟踪绑定元素中的EventEmitter更改并分别更新绑定属性。例如： -

包含formDirectives：

value

并使用表单

 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>

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

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

<击>

<强> Demo

还可以通过创建ng-model事件及其工作原理来阅读angular2中双向绑定的nice write up from Victor Savkin。

Answer 2

您现在可以使用以下语法使用ngModel来执行此操作：

<input [(ngModel)]="myProp" />

方括号和圆括号的组合表示“双向约束”。

请参阅插件here

Answer 3

是的，angular2中有双向绑定。见这里：https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

那么，如何在自定义组件中使用它？

我喜欢做的是：

private currentSelectedItem: MachineItem;
@Output() selectedItemChange: EventEmitter<MachineItem> = new EventEmitter<MachineItem>();

@Input() set selectedItem(machineItem: MachineItem) {
    this.currentSelectedItem = machineItem;
    this.selectedItemChange.emit(machineItem); 
}

get selectedItem(): MachineItem {
    return this.currentSelectedItem; 
}

并像

一样使用它

<admin-item-list [(selectedItem)]="selectedItem"></admin-item-list>

您还可以在实际更改的位置发出新值。但是我发现在一个setter方法中做到这一点非常方便，而且不必费心去做。当我将它直接绑定到我的视图时。

Answer 4

您可以通过附加到输入字段上的事件并更新内部值来执行此操作，如下例所示：

http://plnkr.co/edit/lOFzuWtUMq1hCnrm9tGA?p=preview

创建一个具有包含标签this.label的内部属性的组件和一个需要事件对象的回调changeLabel

@Component({
  selector: 'app',
  templateUrl: 'bound.html'
})
class App {
  label: string;
  constructor() {
    this.label = 'default label'
  }
  changeLabel(event) {
    this.label = event.target.value;
  }
}

bootstrap(App);

创建模板并将回调附加到相应的事件（您可以将其附加到keypress事件，但之后可能需要超时。为简单起见，我将其附加到change事件（这意味着您可能需要关闭输入以查看更新。

<label for="myinput">{{label}}</label>
<input id="myinput" type="text"/>
<p></p>You can change the label above by typing something below</p>
<label for="labeltext">New Label Text</label>
<input type="text" id="labeltext" (change)="changeLabel($event)"/>

Answer 5

还有另一种方法可以将Angular2转换为双向绑定。不要将属性而是对象传递到组件中。如果通过单向绑定传递对象，则其所有属性实际上都是双向绑定的。它使组件不那么通用，因为它需要知道对象，但在许多情况下它仍然有用。

我有一个看起来像这样的组件：

import { Component, Input }    from "@angular/core";
import { NgSwitch, NgSwitchWhen, NgSwitchDefault }    from "@angular/common";

export class Movie
{
    public Title: string;
    public Rating: number;
    public Seen: boolean;
}

@Component
({
    selector: "hh-image-checkbox",
    template: `
        <div [ngSwitch]="movie.Seen"> 
            <div *ngSwitchWhen="true">
                <img src="/Content/res/CheckTrue.png" (click)="onClick()"> 
            </div> 
            <div *ngSwitchDefault> 
                <img src="/Content/res/CheckFalse.png" (click)="onClick()"> 
            </div> 
        </div>
        `,
    directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
})

export class ImageCheckboxComponent
{
    @Input() movie: Movie;

    public onClick()
    {
        this.movie.Seen = !this.movie.Seen;
    }
}

它是这样调用的：

<hh-image-checkbox [movie]="movie"></hh-image-checkbox>

电影对象本身是单向绑定的，但它的所有属性都可以用于双向绑定。

Answer 6

这是一个简单的plunker，它根据 Angular2 2.0.0-beta.17

演示单向，双向和事件驱动的方法。

http://plnkr.co/eXZMoU

双向事件和财产

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

单程财产

<input [value]="name" />

事件驱动

<input (input)="name=$event.target.value">

我们可以为more

挖掘Angular文档

Answer 7

从文档中：

双向绑定（[(...)]）

您经常希望既显示数据属性又在用户进行更改时更新该属性。

在元素方面，需要结合设置特定的元素属性和侦听元素更改事件。

为此，Angular提供了一种特殊的双向数据绑定语法[(x)]。 [(x)]语法结合了属性绑定[x]的括号和事件绑定(x)的括号。
[( )] = BANANA IN A BOX
可视化框中的香蕉，以记住括号放在括号内。

有关更多信息，请参见

Answer 8

简单，试试这个;

{{1}}

Angular2双向数据绑定

8 个答案:

双向绑定（`[(...)]`）

Angular2双向数据绑定

8 个答案:

双向绑定（[(...)]）

双向绑定（`[(...)]`）