在angular 2中将表单字段的数据(值)从一条路由传递到另一条路由

在Angular 2中，可以使用路由参数或共享服务来将表单字段的数据从一条路由传递到另一条路由。

1. 使用路由参数传递数据：
   • 在发送数据的路由中，将数据作为参数添加到目标路由的URL中。
   • 在接收数据的路由中，通过ActivatedRoute服务来获取传递的参数值。

例如，发送数据的路由可以使用以下代码将数据添加到URL中：

import { Router } from '@angular/router';

constructor(private router: Router) {}

sendData(data: any) {

 this.router.navigate(['/target-route', { data: JSON.stringify(data) }]);

}

接收数据的路由可以使用以下代码来获取传递的参数值：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {

 this.route.paramMap.subscribe(params => {

   const data = JSON.parse(params.get('data'));

   // 使用接收到的数据进行操作

 });

}

1. 使用共享服务传递数据：
   • 创建一个共享服务，该服务包含一个可观察对象或行为主题，用于存储和传递表单字段的数据。
   • 在发送数据的组件中，将数据存储到共享服务中。
   • 在接收数据的组件中，通过订阅共享服务中的可观察对象或行为主题来获取数据。

例如，创建一个共享服务来存储和传递数据：

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

import { BehaviorSubject } from 'rxjs';

@Injectable({

 providedIn: 'root'

})

export class DataService {

 private formDataSubject = new BehaviorSubject<any>(null);

 formData$ = this.formDataSubject.asObservable();

 setFormData(data: any) {

   this.formDataSubject.next(data);

 }

}

在发送数据的组件中，将数据存储到共享服务中：

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

constructor(private dataService: DataService) {}

sendData(data: any) {

 this.dataService.setFormData(data);

}

在接收数据的组件中，通过订阅共享服务中的可观察对象来获取数据：

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

constructor(private dataService: DataService) {}

ngOnInit() {

 this.dataService.formData$.subscribe(data => {

   // 使用接收到的数据进行操作

 });

}

这些方法可以根据具体的需求选择使用，它们都可以实现在Angular 2中将表单字段的数据从一条路由传递到另一条路由。