如何以角度将表单数据从一个组件保存到另一个组件？

Question

我只需要使用@Input、@output、路由、激活路由。

有两个组件，分别是addbook 和showbook。 addbook 组件有一个带有提交按钮的表单，它应该保存所有表单数据。

showbook 组件应该只显示表单数据。

这两个组件被放置在一个锚标签的导航栏中。一种是addbookanchor，显示表单，提交表单时，应该持久化数据（保存）。

最后，当你点击 show book 锚标签时，它应该会显示 formdata。

我想出的—— 我使用了一个模板驱动的表单，它在提交时会调用一个

function { this.route.navigate(['showbook',bookID])}

现在我已经在 routerModule.forRoot([routes]) 中将路径作为 showbook/:id 和组件作为 showbook 导入，在 @​​987654327@ 组件中，我使用了 activateRoute 来获取参数，并使用它，我有显示表单数据。

RouterModule.forRoot([{path:'showbook/:id',component:showBookComponent}]) // in app module ts

this.activatedRoute.params.subscribe(params=>{
this.bookId = params['id']
})

我的代码一提交就显示formdata，虽然要求我应该保存数据，当点击showbook时应该显示formdata。

我不允许使用本地存储。

Answer 1

您可以为此使用service。

1. 在addbook填写表格并保存后，将数据存储在服务中。
2. 当您导航到 showbook 时，从服务中检索数据。

例子：

data.service.ts

  import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  formData: Object;

  constructor() { }

  //assign the value
  setFormData(data){
    this.formData = data;
  }

  //To get the value
  getFormData(){
    return this.formData ;
  }
}

在 addbook.component.ts

首先导入服务。

import { DataService } from '../../data.service';

在构造函数中注入服务

constructor(private dataService: DataService){}

关于你的保存按钮功能

this.dataService.setFormData(data);

在 showbook.component.ts

中

首先导入服务。

import { DataService } from '../../data.service';

在构造函数中注入服务

constructor(private dataService: DataService){}
 

在初始化函数中显示表单数据

 ngOnInit(): void {
    this.formData = this.dataService.getFormData();
  }