文章/答案/技术大牛

发布

社区首页 >问答首页 >页面刷新角6时保持相同的数据

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

Stack Overflow用户

提问于 2019-07-06 12:51:15

回答 2查看 8.4K关注 0票数 2

我在按钮上从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);
}

angular

typescript

回答 2

Stack Overflow用户

发布于 2019-07-06 12:58:10

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

因此，在您的示例中，您只需将表单的数据放在本地存储中，并在另一个组件中使用。

请参考这个如何使用它。

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

票数 0

Stack Overflow用户

发布于 2019-07-06 14:20:56

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

但是，最好的方法是完成来自同一页面本身的路由(页面)数据。

假设你是从

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

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

如果items/:id直接加载(由其他人加载)或刷新，则从items页面传递的数据将丢失。
因此，如果数据是未定义的，则必须有一个条件来获取数据。您可以这样做，因为您所需要的只是:id，您已经有了它作为路由param。

根据您的示例，请考虑传递Department、Year、No作为路由查询params。如果数据是从上一页传递的，请使用该数据。否则，使用这些查询参数执行服务器调用(刷新时或当其他人访问该路由时直接加载页面时)。

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
    ...
  });
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56914250

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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