Angular 路由清除表单'；s提交的数据

这是一份登记表。用户通过表单提交数据。然后，提交的数据将显示在视图中。但当我们发送到用户页面时，列表就消失了。可能是因为组件重新加载。这是怎么做到的。以便数据保持不变

//app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
import { Capitalize } from './capitalize.pipe';
import { FilterPipe } from './filter.pipe';
import { FormsModule } from '@angular/forms';
import { ListComponent } from './list/list.component'
import { Routes, RouterModule } from '@angular/router';
import { RegistrationComponent } from './registration/registration.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { HomeComponent } from './home/home.component';
import { InputDataService } from './services/input-data.service';

const appRoutes: Routes = [
  { path: 'registration', component: RegistrationComponent },
  { path: 'users', component: ListComponent },
  { path: '', component: HomeComponent },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    Capitalize,
    FilterPipe,
    ListComponent,
    RegistrationComponent,
    PageNotFoundComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [ InputDataService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

//app.component.html

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

---

TLDR：在组件之间共享信息的最佳方式是使用服务。您可以按照此处的文档教程进行操作：

1） 创建一个服务类（类似于“RegisteredUserService”）并用

@Injectable

装饰它

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

3） 在app.module.ts中，您需要在整个应用程序中提供服务，方法是将服务添加到

提供商

中，例如：

提供商：[RegisteredUserService]

。这将创建一个组件可以访问的服务共享实例

4） 您可以通过将服务注入组件的构造函数来访问任何组件中的服务，如下所示：

constructor（受保护的服务：RegisteredUserService）{}

---

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

你能创建一个复制品吗？对不起，我不知道怎么做。可以在此处添加代码吗？使用创建代码<代码>新建->角度将为您提供所需的所有骨架。在那里添加代码并使其工作。我可以从那里调试。还有团队查看器，我可以调试OK，等等。让我尝试一下输入错误。找不到plunkr。让我们再试一次这正是我所做的。但它仍然会清除数据。我想让人看看我的代码。我可以通过teamviewer共享它。请让我知道你是否可以帮助更新你帖子上的app.module.ts代码。看起来你没有服务。您也没有在应用程序模块中使用提供商。粘贴你的服务代码也可以，那是enoughi建议的TeamViewer，这样你就可以查看任何和所有的代码了。如果您希望有人查看您的整个项目，那么制作plunkr或链接GitHub回购协议是更常见的做法。

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() { }

}