Question

我从WebAPI上单击按钮获取数据，然后将组件导航到其他组件以显示此数据，这个技巧对我来说很好，但问题是当我刷新页面时，我的数据为空，请提供一些信息解决方案或示例以保留相同的数据。预先感谢

component.ts //where I'm getting data onClick

onSubmit(){
this.departmentService.GetDepartmentSearchResults(this.modelSearch1.value.Department, this.modelSearch1.value.Year, this.modelSearch1.value.No).subscribe(res => {
      this.objDepartmentsSearchedResults = res as DepartmentsSearchedResultsModel[];
      this.departmentService.objDepartmentsSearchedResults = this.objDepartmentsSearchedResults;
      this._router.navigate(['departments/search-results']);
    });
}

service.ts //where I'm passing data to varaible

objDepartmentsSearchedResults: DepartmentsSearchedResultsModel[];

其他component.ts //where I want to show this data

ngOnInit(){
    console.log("results listing : ", this.departmentServices.objDepartmentsSearchedResults);
}

Answer 1

您可以使用一种称为localStorage的东西，它可以将数据保存在任何组件中，并在其他任何组件中使用。

因此，在您的情况下，您只需将表单数据放入本地存储中，然后在另一个组件中使用它即可。

请参考使用方法。

https://medium.com/@tiagovalverde/how-to-save-your-app-state-in-localstorage-with-angular-ce3f49362e31

Answer 2

您可以使用localStorage/sessionStorage来存储和检索数据。

但是，最好的方法是从同一页面本身完成路线（页面）数据。

假设您要从

路由

items(ItemListComponent) --> items/:id(ItemDetailsComponent)

您可以从items页面（ ItemListComponent ）传递与ID相关联的项目数据。因此， ItemDetailsComponent 可能不需要额外的调用来获取数据。

如果items/:id直接（由其他人加载）或刷新，则从items页面传递的数据将丢失。
因此，如果传入的数据未定义，则必须具有获取数据的条件。您可以执行此操作，因为您只需要:id，就可以拥有路径参数

根据您的示例，考虑将部门，年份，否作为路由查询参数传递。如果数据是从上一页传递过来的，请使用它。否则，使用这些查询参数进行服务器调用（在刷新时或在其他人访问该路由时直接加载页面时）

page1.component.ts

onSubmit(){
  const {Department, Year, No} = this.modelSearch1.value;
  this._router.navigate([`departments/search-results?department=${Department}&year=${Year}&no=${No}`]);
}

page2.component.ts

ngOnInit(){
  this.activatedRoute.queryParams.subscribe(params => {
    const Department = params.get('department');
    const Year = params.get('year');
    const No = params.get('no');

    // make departmentServices call to get data
    ...
  });
}

页面刷新角度6时保持相同的数据

2 个答案: