在Angular 9中,可以使用RxJS的switchMap
操作符来在提交响应式表单后重新加载路由。下面是一个解决方法的代码示例:
首先,在你的组件类中导入需要的模块和服务:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { switchMap } from 'rxjs/operators';
import { DataService } from './data.service';
然后,在组件类中定义表单和构造函数:
@Component({
selector: 'app-form',
template: `
`
})
export class FormComponent {
myForm: FormGroup;
constructor(
private formBuilder: FormBuilder,
private router: Router,
private dataService: DataService
) {
this.myForm = this.formBuilder.group({
// 定义表单控件
});
}
onSubmit() {
const formData = this.myForm.value;
this.dataService.submitForm(formData).pipe(
switchMap(() => this.router.navigateByUrl('/reload-component'))
).subscribe();
}
}
在上面的代码中,onSubmit
方法会在表单提交时被调用。首先,它会获取表单的值。然后,它会使用dataService
服务来提交表单数据。使用switchMap
操作符,当表单提交成功后,它会调用router.navigateByUrl
方法来重新加载指定的路由路径('/reload-component')。
请注意,上述代码中的DataService
是一个示例服务,你需要根据你自己的需求来定义和实现。同样,你也需要根据你的路由配置来指定正确的路由路径。
最后,在你的路由模块中定义新的路由路径:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ReloadComponent } from './reload.component';
const routes: Routes = [
// 其他路由路径
{
path: 'reload-component',
component: ReloadComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
上述代码中,我们定义了一个新的路由路径'/reload-component'
,并将其映射到ReloadComponent
组件。
这样,当你的表单提交后,它会重新加载ReloadComponent
组件,并显示新的数据或状态。