Почему данные об услуге не сохраняются при смене маршрутов?

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],
   ..
})

Когда я использую функцию getData в homeComponent, она отлично работает, и ответ добавляется в массив данных. Но - и вот в чем проблема - после перехода ко второму маршруту данные в сервисе снова становятся пустым массивом.

Я бы подумал, что служба не перезапускается при навигации.

Так в чем же проблема? Спасибо.

Answer 1

Проблема найдена и решена с другой стороны.

Я использовал <a href="/"> в качестве ссылки на маршруты, что, вероятно, вызывает перезапуск приложения при каждом нажатии. <a routerlink="/"> решает проблему.

Answer 2

при переходе на другой маршрут все локальные данные будут удалены и будут инициализированы со значениями по умолчанию. Поэтому, если вы хотите сохранить data для использования на какой-либо другой странице, вам придется сохранить значения в объявленной глобально переменной.

Для объявления глобальных переменных, которые можно использовать на всех страницах, сначала создайте файл global.service.ts и импортируйте файл во все компоненты. Везде, где вам нужно, вы можете обращаться к этим глобальным переменным как this.global.variableName.

Перейдите по этой ссылке о том, как создавать глобальные службы.

Измените ваши коды как

после создания глобального сервиса, импортируйте этот глобальный сервис в ваш 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);
};