为什么更改路线时不保存服务数据？

Question

我是 angular 的新手，我尝试构建一个小应用程序。我有这个服务，它包含一个变量和一个函数：

data.service.ts

data = [];
getData() {
  this.http.get(url).subscribe((res)=>
  this.data.push(res));
};

我还有两条路线：

app.module.ts（此处定义服务）

import { DataService } from './data.service';
// ...
const appRoutes = [
  { path: 'home', component: HomeComponent },
  { path: 'settings', component: SettingsComponent }
]
    
@NgModule({
  // ..
  providers: [DataService],
  // ..
})

当我在 homeComponent 中使用 getData 函数时，它工作正常，响应被添加到数据数组。但是-这就是问题所在-一旦我导航到第二条路线，服务中的数据就会变回空数组。

我本以为导航时服务没有“重新启动”。

所以，问题是什么？谢谢。

Answer 1

当您移动到不同的路线时，所有本地数据都将被删除并使用默认值进行初始化。所以，如果你想维持 data 在其他页面中使用，你必须将值保存在全局声明的变量中。

为了声明可以在所有页面中使用的全局变量，首先创建一个global.service.ts文件并将该文件导入到所有组件中。在任何需要的地方，您都可以访问这些全局变量 this.global.variableName.

按照此link了解如何创建全球服务。

像这样更改您的代码

创建全局服务后，在您的 app.module.ts 中导入此全局服务，然后在 home.component.ts 中导入它，如

import { GlobalService } from '../global.service';
.
.
.constructor(public global: GlobalService) { }
.
.
getData(){
    this.http.get(url).subscribe((res)=>
    this.global.globalData.push(res);
};

Answer 2

从不同的方向发现并解决了问题。

我使用 <a href="/"> 作为路由的 link，这可能会导致应用程序在每次单击时自行重启。 <a routerlink="/"> 解决问题。

为什么更改路线时不保存服务数据？

Why data on service isn't saved when changing routes?

angular-services

angular

data.service.ts

app.module.ts（此处定义服务）