在页面Angular2之间来回移动时从服务更新表单答案

【问题标题】：Updating forms from service when going back and forth between pages Angular2在页面Angular2之间来回移动时从服务更新表单
【发布时间】：2017-03-10 14:08:03
【问题描述】：

我有一个 Angular 2（稳定版本）应用程序（带有表单的多个页面），当用户填写表单并通过提交进入下一页时，我更新了一个服务对象（表单值 firstname: value, lastname:值等），用户被导航到下一页（表单）。

一旦用户被带到下一页，服务对象就会更新为上一页收集的值。但是，如果用户点击后退按钮或单击链接返回上一页，则表单为空。我希望能够填充在服务对象中收集的值。我已经尝试阅读有关 angular2 中 4 种不同绑定方式的信息，但它似乎不起作用。我尝试使用 *ngIf 来查看是否可以检查服务对象属性并在用户通过后退按钮或提供的链接导航回上一页时重新填充表单。请注意，我没有收到任何错误。只是不了解绑定是如何工作的。任何有关如何解决此问题的帮助表示赞赏。

这是我的组件和相关的 Html 模板 (sn-ps) start-component.ts

import { Component, OnInit } from '@angular/core';
import {UserService} from '../services/user-service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-start',
  templateUrl: './start.component.html',
  styleUrls: ['./start.component.css']
})
export class StartComponent implements OnInit {

  constructor(
    private _userSerivce: UserService,
    private _router: Router,
   ) {
    console.log(_userSerivce);
  }

  ngOnInit() {
  }

  startSubmitted: boolean = this._userSerivce.startComplete;

  onSubmit(value: any){
    //console.log(value);
    this._userSerivce.startComplete = true;
    this._userSerivce.start = value;
    console.log(this._userSerivce.startComplete);
    console.log(this._userSerivce.start);
    this._router.navigate(['personal']);
  }

}

来自 Start.component 模板的片段

<div class="container">
  <div class="row">
  <app-side-nav-bar></app-side-nav-bar>

  <div class="col-sm-7">
    <h1>Start</h1>
    <form autocomplete='off' novalidate #form="ngForm"(ngSubmit)="onSubmit(form.value)">

    <div class="form-group row">
      <div class="col-sm-8">
        <label for="firstName">First Name</label>
        <input
          class="form-control" type="text"
          required
          name="firstName"
          ([ngModel])='firstName'
          [value]='firstName'
         >
      </div>
    </div>
    <div class="lg-pad"></div>

    <div class="form-group row">
      <div class="col-sm-12">
        <button type="submit">Submit</button>
      </div>
    </div>
  <div>

【问题讨论】：

标签： forms angular data-binding service

【解决方案1】：

因此，当用户从一个页面前进到另一个页面时，服务会使用用户键入的值进行更新。如果他们点击后退按钮，ngInit 会查找服务中的值并更新表单。这真的很简单。此外，我还实现了本地存储来存储表单值。

【讨论】：