在Angular 8中,要返回上一页并且保留之前输入的数据,可以使用Angular的Router模块提供的导航功能。
首先,在组件中导入Router模块:
import { Router } from '@angular/router';
然后,在构造函数中注入Router:
constructor(private router: Router) { }
接下来,在返回上一页的方法中,使用Router的navigateByUrl
方法来导航到上一页,并且通过queryParams参数传递之前输入的数据:
goBackWithData(data: any) {
this.router.navigateByUrl('/previous-page', { queryParams: { inputData: data } });
}
在上述代码中,/previous-page
是上一页的路由路径,inputData
是传递数据的参数名,data
是之前输入的数据。
在上一页的组件中,可以通过ActivatedRoute模块来获取传递的数据。首先导入ActivatedRoute:
import { ActivatedRoute } from '@angular/router';
然后在构造函数中注入ActivatedRoute:
constructor(private route: ActivatedRoute) { }
接下来,在ngOnInit生命周期钩子函数中,使用route的queryParams属性来获取传递的数据:
ngOnInit() {
this.route.queryParams.subscribe(params => {
const inputData = params['inputData'];
// 使用传递的数据进行相应的操作
});
}
在上述代码中,inputData
即为之前输入的数据,可以根据需要进行相应的操作。
这样,就可以在Angular 8中返回上一页,并且保留之前输入的数据了。
关于Angular的Router模块和ActivatedRoute模块的更多详细信息,可以参考腾讯云的相关文档和官方指南:
领取专属 10元无门槛券
手把手带您无忧上云