Angular2: двусторонняя привязка внутри родительского/дочернего компонента

Версия: "angular2": "2.0.0-beta.6"

Я хотел бы реализовать двустороннюю привязку внутри случая родительского/дочернего компонентов.

В моем дочернем компоненте я использую двустороннюю привязку для отображения текста во время редактирования.

Детский компонент (InputTestComponent [selector:'input-test']):

<form (ngSubmit)="onSubmit()" #testform="ngForm">
    {{name}}
    <textarea #textarea [(ngModel)]="name" ngControl="name" name="name"></textarea>
    <button type="submit">Go</button>
</form>

Затем я хотел бы распространить это изменение на его родительский компонент. Я пробовал с [(name)]="name" без успеха.

Родительский компонент:

<div>
  {{name}}
  <input-test [(name)]="name"></input-test>
</div>

Пример кода

Какой самый простой способ сделать это (менее подробный)?

Ответ 1

Для двухстороннего связывания используйте @Input() и @Output(). Имена должны быть propName и propNameChange, чтобы разрешить синтаксис сокращенного привязки [(propName)]="someModel", в противном случае вам понадобится более длинная версия [propName]="someModel" (propNameOtherOutputName)="propName=$event;propNameOtherOutputName.emit($event)"

@Component{
  ...
  template: `
<textarea #textarea [(ngModel)]="name" (ngModelChange)="nameChange.emit($event)" ngControl="name" name="name"></textarea>

`})
export class InputTestComponent {
  @Output() nameChange:EventEmitter<String> = new EventEmitter<String>();
  @Input() name:string;
}

Ответ 2

Вам нужно использовать элементы ввода/вывода в дочернем компоненте, как описано ниже:

@Component({
  selector:'input-test'
  template: `
    <form (ngSubmit)="onSubmit()" #testform="ngForm">
    {{name}}
      <textarea #textarea [(ngModel)]="name" ngControl="name" name="name"></textarea>
      <button type="submit">Go</button>
    </form>
  `
})
export class InputTestComponent {
  @Input()
  name:string;

  @Output()
  nameChange:EventEmitter<string> = new EventEmitter();
}

Когда обнаружено изменение, вам необходимо запустить событие с помощью EventEmitter:

onSubmit() {
  this.nameChange.emit(this.name);
}

Таким образом, связанный элемент родительского компонента будет автоматически обновляться при использовании следующего синтаксиса:

<input-test [(name)]="name"></input-test>

Вы можете заметить, что вы можете использовать событие ngModelChange, если вы хотите обнаружить изменение ввода вместо использования отправки формы:

@Component({
  selector:'input-test'
  template: `
    <form #testform="ngForm">
    {{name}}
      <textarea #textarea [ngModel]="name" (ngModelChange)="onChange($event)" ngControl="name" name="name"></textarea>
    </form>
  `
})
export class InputTestComponent {
  @Input()
  name:string;

  @Output()
  nameChange:EventEmitter<string> = new EventEmitter();

  onChange(newName) {
    this.name = newName;
    this.nameChange.emit(this.name);
  }
}