如何在angular 2中的组件之间使用双向数据绑定?

要在使用组件时使用双向绑定short,您需要将输出属性读入modelChange:

export class FormInputComponent implements DoCheck {
  @Input() model: string;
  @Output() modelChange: EventEmitter = new EventEmitter();

  ngDoCheck() {
    this.modelChange.next(this.model);
  }
}

这样使用它:

<form-input [(model)]="user.name" type="text" name="test" placeholder="This is a test" alt="A test input" label="Name"></form-input>
<form-input [(model)]="user.email" type="email" name="test" placeholder="This is a test" alt="A test input" label="Email"></form-input>
<pre>{{user.name}}</pre>

另外:使用ngDoCheck发出模型更改将严重影响性能,因为每次检查周期都会发出新值,无论是否更改。这真的很常见!(试试console.log!)

因此,我想做的是这样做,以获得类似的便利,但没有副作用:

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方法中轻松地完成这一操作非常方便,并且当我直接在视图中绑定它时不必费心。

这太长了,不能作为对蒂埃里回答的评论。。。

使用 emit() 而不是 next() (已弃用),并且仅调用 emit(newValue) 当 model 变化。您很可能希望在FormInputComponent模板中包含这样的内容:

<input [ngModel]="model" (ngModelChange)="onChanges($event)">

然后在FormInputComponent逻辑中:

onChanges(newValue) {
  this.model = newValue;
  this.changeModel.emit(newValue);
}

我发现其他的答案有点令人困惑,所以我把一切都归结为一个我认为非常简单的答案 Stack Blitz 实例

这个例子只需要两个简单的组件,app。组件&test.com组件。真正的魔法只需要在Output修饰符的名称后面加上“Change”。只需使用确切的名称作为@Input装饰符,并在其末尾添加“Change”即可。在本例中,@Input名称为“testVal”,@Output名称为”testValChange“,这是Angular语法糖,或magic:-)。

以下是完整的应用程序组件。ts文件,

import { Component, Input } from "@angular/core";

@Component({
  selector: "my-app",
  template: `

  {{testVal}} <-- this value is printed by app.component

  <test-component [(testVal)]="testVal"></test-component>

  `
})
export class AppComponent {
  @Input() testVal = "My Greeting";

}

下面是完整的测试。组件文件,

import { Component, Input, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "test-component",
  template: `
  <br /><br />
  <input type="button" (click)="hi()" value="update greeting" /> <-- this button in test.component updates the greeting above using two way binding.
  `
})
export class TestComponent {
  @Input() testVal;
  @Output() testValChange = new EventEmitter<string>();
  increment = 0;

  hi(){
    this.testVal = 'Hey There!';
    this.testValChange.emit(this.testVal + String(this.increment));
    this.increment++;
  }
}

干杯

现在有一个类似的问题,但有一个额外的层:一个组件,它包含一个传递数据对象的子组件,它还包含另一个子组件,该子组件具有一个输入字段,它将相同的数据对象传递给它。我想编辑输入字段,并将数据备份2层传递给父组件。由于某种原因无法实现。。。

我添加了一个stackblitz: https://stackblitz.com/edit/angular-8oh2fm