在页面之间来回切换时从service更新表单

Question

我有一个angular 2(稳定版本)应用程序(多个页面与表单)，其中，当用户填写表单，并前往下一页提交我更新一个服务对象(表单值firstname: value, lastname: value等)，用户被导航到下一页(表单)。

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

这是我的组件和相关的Html模板(片段) 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 template

<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>

Answer 1

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