2016-06-03 22 views
1

Bindung habe ich eine Frage über Zweiwege in Angular2 BindungZweiwege in Angular 2

Ich habe durch viele Beispiele sah, wie es Felder mit Eingabe verwendet werden und so weiter. Aber ich wollte es in meinem Fall versuchen: Ich habe zwei Komponenten, eine davon ist eine gemeinsame (wiederverwendbare) Komponente. Ein anderer hat sein eigenes Modell.

Kann ich ein Modell der Hauptkomponente an eine wiederverwendbare Komponente weitergeben und eine Zweiwege-Bindung verwenden?

<day [(currentDay)]="model.currentDay"></day> 

Meine Fragen:

1) Kann ich das tun? Ist es in der richtigen Weise oder ist es besser, eventEmitter zu verwenden?

2) Dies ist, wie ich speichere Modell in Hauptkomponente:

model: DayModel = new DayModel(null, null); 

und hier ist das Modell in dieser wieder verwendbaren Komponente:

@Input() currentDay: DayModel; 

Wenn ich versuche, es in wieder verwendbaren zu verwenden Komponente und bekomme Zugriff auf den aktuellen Tag, ich habe ein solches Problem: "Kann nicht die Eigenschaft '#someProperty' von undefined" (currentDay ist undefined) und das ist, warum muss ich dies:

Wie vermeide ich es?

Vielen Dank im Voraus!

Antwort

1

In der Tat mit nur @Input verwenden Sie die Hälfte der Arbeit ;-) Nur eine Möglichkeit verbindlich.

In Ihrem Fall müssen Sie auch eine @Output mit einem standardisierten Namen:

@Output() currentDayChange: EventEmitter<DayModel> = new EventEmitter(); 

die übergeordnete Komponente auszulösen, dass ein Update gibt, verwenden Sie diese:

this.currentDayChange.emit(newValue); 

Der [(...]) Ausdruck ist eine Abkürzung für [...] Plus (...):

<day [currentDay]="model.currentDay" 
    (currentDayChange)="model.currentDay = $event"></day> 

Also müssen Sie beide implementieren ...

+0

auf andere Weise kann ich nicht eine @Input() Variable für Zwei-Wege-Bindung verwenden? – weratius

+0

Sie können es verwenden, aber Sie müssen als Referenz arbeiten. Kein primitiver Wert (String, Zahl) wird unterstützt ... Der von mir beschriebene Ansatz funktioniert in allen Fällen ;-) –

+0

ok, thx. Ich dachte mir, ich könnte es genauso benutzen wie [()] =) – weratius