路由清除表单提交的数据

Question

这是一份登记表。用户通过表单提交数据。然后在视图中显示提交的数据。但是当我们路由到用户页面时，列表就会消失。可能是因为组件重新加载。怎么可以这样做。这样数据仍然是

// app.module.ts

<section class="container">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div>    
        <a class="navbar-brand" routerLink="/">Brand</a>
      </div>  
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a routerLink="/">Home</a></li>
          <li><a routerLink="/registration">Registration</a></li>
          <li><a routerLink="/users">Users</a></li>                    
        </ul>        
      </div>
    </div>
  </nav>
</section>
<router-outlet></router-outlet>

// app.component.html

import { Injectable } from '@angular/core';
import { IPersonModel } from '../interface/person-model';

// input data service which adds and provides data to view
@Injectable()
export class InputDataService {
  public personArr;
  personDetails: IPersonModel = {
    name: '',
    email: '',
    address: '',
    date: '',
    chosenCourse: ''
  };

  getPersonData() {
    return this.personDetails;
  }

  setPersonData(obj: IPersonModel) {
    this.personDetails.name = obj.name;
    this.personDetails.email = obj.email;
    this.personDetails.address = obj.address;
    this.personDetails.chosenCourse = obj.chosenCourse;

  }

  constructor() { }

}

// app.service.ts

$(document).ready(function() {
	var degrees = 0;
  $('.book-cover').click(function rotateMe(e) {

    degrees += 180;

    $('.book-cover').css({
      'transform': 'rotateY(-' + degrees + 'deg)',
      '-ms-transform': 'rotateY(-' + degrees + 'deg)',
      '-moz-transform': 'rotateY(-' + degrees + 'deg)',
      '-webkit-transform': 'rotateY(-' + degrees + 'deg)',
      '-o-transform': 'rotateY(-' + degrees + 'deg)',
    });

  })
});

Answer 1

TLDR：在组件之间共享信息的最佳方式是使用服务。您可以在此处按照文档教程进行操作：https://angular.io/tutorial/toh-pt4

1）创建一个服务类（类似'RegisteredUserService'）并用@Injectable装饰它。

2）使用服务类来存储和检索注册的用户信息。

3）在app.module.ts中，您需要在整个应用中提供服务，方法是将其添加到providers，如下所示：providers: [RegisteredUserService]。这将创建一个组件可以访问的服务共享实例。

4）您可以通过将其注入组件的构造函数来访问任何组件中的服务，如下所示：constructor(protected service: RegisteredUserService){}

通过查看app.module.ts中的组件列表，我会说你应该将服务注入到RegistrationComponent和ListComponent中。当您在RegistrationComponent中提交表单数据时，它应该在您的服务中添加用户。然后在ListComponent中，您应该从服务中获取并显示用户信息列表。