在Angular中,当使用路由导航到另一个组件时,无法直接传递表单数据给目标组件。但是,可以通过使用服务来解决这个问题。以下是一个解决方法的示例代码:
FormService
的服务:import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class FormService {
private formData = new BehaviorSubject(null);
setFormData(data: any) {
this.formData.next(data);
}
getFormData() {
return this.formData.asObservable();
}
}
FormService
:import { Component } from '@angular/core';
import { FormService } from './form.service';
@Component({
selector: 'app-source-component',
template: `
`
})
export class SourceComponent {
constructor(private formService: FormService) {}
submitForm() {
// 处理表单提交逻辑
const formData = {/* 表单数据 */};
this.formService.setFormData(formData);
}
}
FormService
获取表单数据:import { Component, OnInit } from '@angular/core';
import { FormService } from './form.service';
@Component({
selector: 'app-target-component',
template: `
`
})
export class TargetComponent implements OnInit {
formData: any;
constructor(private formService: FormService) {}
ngOnInit() {
this.formService.getFormData().subscribe(data => {
this.formData = data;
// 处理表单数据
});
}
}
通过以上代码,表单数据将通过 FormService
在路由后传递给目标组件。目标组件通过订阅 FormService
的 getFormData()
方法来获取表单数据,从而可以在目标组件中进行处理。