Angular 2 ngModel in untergeordneter Komponente aktualisiert übergeordnete Komponenteneigenschaft

Ich habe eine einfache Benutzeroberfläche erstellt, die aus zwei Komponenten besteht (Eltern und Kind).

Was macht die Benutzeroberfläche, wenn ich ein paar Dinge in das Eingabefeld der Child-Komponente eingebe. Der Wert ändert sich mit ngModel.

Die untergeordnete Komponente funktioniert auf diese Weise einwandfrei.

// Child Component
@Component({
    selector: 'child',
    template: `
        <p>{{sharedVar}}</p>
        <input [(ngModel)]="sharedVar">
    `
})
export class ChildComponent {
    sharedVar: string;
}

Jetzt habe ich eine übergeordnete Komponente, die denselben Wert wie die untergeordnete Komponente verwenden soll.

Ich habe die untergeordnete Komponente zur übergeordneten Vorlage hinzugefügt und benutze die Abhängigkeitsinjektion, um das @ der untergeordneten Komponente aufzurufesharedVar.

// Parent Component
@Component({
    selector: 'parent',
    template: `
        <h1>{{sharedVar}}</h1>
        <child></child>
    `,
    directives: [ChildComponent],
    providers: [ChildCompnent]
})
export class ParentComponent {
    sharedVar: string;
    constructor(child: ChildComponent) {
        this.sharedVar = child.sharedVar;
    }
}

Das Problem ist, wie ich in das Eingabefeld tippe, der Wert in<p> ändert sich automatisch, während der Wert in der übergeordneten Komponente<h1> verändere dich nicht