时间戳

首页 > 解决方案 > 如何以角度将表单数据从一个组件保存到另一个组件？

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

问题描述

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

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

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

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

最后，当您单击显示书锚标记时，它应该显示表单数据。

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

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

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

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

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

我的代码在提交后立即显示表单数据，但要求是我应该保存数据，并且showbook单击时应该显示表单数据。

我不允许使用本地存储。

标签： javascriptangulartypescript

解决方案

您可以service用于此目的。

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

例子：

数据服务.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){}

在 init 函数上显示表单数据

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

推荐阅读