@ Ввод: двухсторонняя привязка данных не работает

Question

Я пытаюсь реплицировать это: http://plnkr.co/edit/OB2YTMJyeY3h9FOaztak?p=preview(этот плункер является примером, который работает, и я хочу получить тот же результат, но с моим кодом, который не работает)

================================================================================================================================== ====================

Я это просто два способа связывания, я пытаюсь обновить свойство строки, например на родителях как на ребенке

Проблема: при нажатии «обновление от родителя ", оба обновления привязок. Но при нажатии «обновление от ребенка», только обновления для детей!

Это кажется очень простым, что я могу делать неправильно?

(Примечание: Я использовал угловую CLI для подбегая проекта)

=========================== ======================================= компонент

родитель:

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-my-dad', 
    templateUrl: './my-dad.component.html', 
    styleUrls: ['./my-dad.component.css'] 
}) 
export class MyDadComponent { 

    parentModel: string; 

    constructor() {} 

    updateModel(){ 
    this.parentModel += ' parent'; 
    } 
} 

шаблон родитель

<h2>Parent: {{ parentModel }} </h2> 
<button (click)="updateModel()"> update from parent </button> 

<app-my-child [(model)]="parentModel"></app-my-child> 

компонент Детский

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

@Component({ 
    selector: 'app-my-child', 
    templateUrl: './my-child.component.html', 
    styleUrls: ['./my-child.component.css'] 
}) 
export class MyChildComponent { 

    @Input() model: string; 

    constructor() { } 

    updateModel(){ 
    this.model += ' child'; 
    } 
} 

Детский шаблон:

Answer 1

Для двухсторонняя связывания с использованием синтаксиса [(xxx)] (банан в коробке), вам нужно и @Input() и @Output() с соответствующими именами, такими как

@Input() myProp:String; 
@Output() myPropChange:EventEmitter<String> = new EventEmitter<String>; 

Смотрите также https://angular.io/docs/dart/latest/guide/template-syntax.html#!#two-way

Для двухсторонняя связывания с ngModel работать, ваш компонент должен реализовать ControlValueAccessor

Смотрите также

• https://angular.io/docs/ts/latest/api/forms/index/NgModel-directive.html
• https://github.com/angular/angular/issues/11073#issuecomment-242563788