我只需要使用@Input、@output、路由、激活路由。
有 2 个组件，即addbook和showbook。addbook组件有一个带有提交按钮的表单，它应该保存所有表单数据。
showbook 组件应该只显示表单数据。
这两个组件放置在锚标记的导航栏中。一个是addbookanchor，它显示表单，当你提交表单时，它应该持久化数据（保存它）。
最后，当您单击 show book 锚标记时，它应该显示表单数据。
我想出了什么 - 我使用了一个模板驱动的表单，当提交时调用一个
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单击时应显示表单数据。
我不允许使用本地存储。
您可以service为此目的使用。
addbook并保存表格后，将数据存储在服务中。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();
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句