Я пытаюсь выполнить трехстороннюю привязку входного элемента к базе данных firebase в Angular.js 2 (2.0.0-rc.4), используя AngularFire 2 (2.0.0-beta.2).
У меня очень простой html, например:
<form (ngSubmit)="onSubmit()" #commentForm="ngForm">
<input [(ngModel)]="model.author" type="input" name="author" required>
</form>
В моем компоненте, чтобы сохранить и загрузить содержимое этого ввода в firebase, у меня есть такая реализация:
export class CommentFormComponent implements OnInit, AfterViewInit {
@ViewChild("commentForm") form;
// http://stackoverflow.com/info/34615425/how-to-watch-for-form-changes-in-angular-2
firebaseInitComplete = false;
model: Comment = new Comment("", "");
firebaseForm: FirebaseObjectObservable<Comment>;
constructor(private af: AngularFire) { }
ngAfterViewInit() {
this.form.control.valueChanges
.subscribe(values => {
// If we haven't get the initial value from firebase yet,
// values will be empty strings. And we don't want to overwrite
// real firebase value with empty string on page load
if (!this.firebaseInitComplete) { return; }
// If this is a change after page load (getting initial firebase value) update it on firebase to enable 3-way binding
this.firebaseForm.update(values);
});
}
ngOnInit() {
this.firebaseForm = this.af.database.object("/currentComment");
// Listen to changes on server
this.firebaseForm.subscribe(data => {
this.firebaseInitComplete = true; // Mark first data retrieved from server
this.model = data;
});
}
}
В приведенном выше коде я могу прочитать начальное значение и значение обновления firebase в firebase, когда пользователь вводит что-то в режиме реального времени.
Но наличие ручной логики для проверки this.firebaseInitComplete
и добавления ngAfterViewInit
для прослушивания изменений кажется немного неправильным, и я просто взламываю его на работу.
Существует ли лучшая реализация трехсторонней привязки с меньшим логическим внутренним компонентом?