Как предотвратить потерю данных при навигации по углам?

Question

Я хочу сохранить массив элементов в сервисе (называемом сервисом корзины) и показать его в компоненте (cart.component.ts).но элементы выбираются каждый компонентом bgview.component.ts, который является дочерним элементом компонента single.component.ts, который получает элементы через запросы http.

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

Я пробовал следующие шаги:

Компонент, с которого я хочу отправлять элементы:

export class BgviewComponent implements OnInit {
@Input() item: Item;
  constructor(private cartservice: CartService) { }
  ngOnInit() {
  }

  onAddToCart(){
    this.cartservice.items.push(this.item);


  }
}

услуга:

   @Injectable({
    providedIn: 'root',
  })
export class CartService {
public items: Item[]=[];

}

принимающий компонент:

export class CartComponent implements OnInit {
 items: Item[]=[];

  constructor(private cartservice:CartService) { 


  }

  ngOnInit() {
    this.items = this.cartservice.items;
    console.log(this.items) //gives empty array

  }

}

способ маршрутизации:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeModule } from './pages/home/home.module';
import { ContactusModule } from './pages/contactus/contactus.module';
import { SingleModule } from './pages/single/single.module';
import { LoginModule } from './pages/login/login.module';
import { SearchpModule } from './pages/searchp/searchp.module';
import { AdminModule } from './pages/admin/admin.module';
import { FindpModule } from './pages/findp/findp.module';
import { AuthGuardService } from './services/auth.service';
import { CartModule } from './pages/cart/cart.module';


const routes: Routes = [
  {
    path: '',
    loadChildren: () => HomeModule,
  },
  {
    path: 'contact',
    loadChildren: () => ContactusModule,
  },
  {
    path: 'single/:id',
    loadChildren: () => SingleModule,
  },
  {
    path: 'login',
    loadChildren: () => LoginModule,
  },
  {
    path: 'searchp/:id',
    loadChildren: () => SearchpModule,
  },
  {
    path: 'login/admin',
    loadChildren: () => AdminModule,  canActivate: [AuthGuardService]
  },
  {
    path: 'cart',
    loadChildren: () => CartModule,
  },
  {
    path: 'findp/:str',
    loadChildren: () => FindpModule,
  },
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

модуль корзины:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CartComponent } from './cart.component';
import { CartRoutingModule } from './cart-routing.module';
import { CartService } from 'src/app/services/cart.service';



@NgModule({
  declarations: [ CartComponent],
  imports: [
    CommonModule,
    CartRoutingModule,
  ],
  providers:[

  ]
})
export class CartModule { }

один модуль:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SingleComponent } from './single.component';
import { SharedModule } from 'src/app/shared/shared.module';
import { SingleRoutingModule } from './single-routing.module';
import { BgviewComponent } from './bgview/bgview.component';
import { HttpService } from 'src/app/services/http.service';
import { CartService } from 'src/app/services/cart.service';



@NgModule({
  declarations: [SingleComponent, BgviewComponent],
  imports: [
    CommonModule,
    SharedModule,
    SingleRoutingModule,

  ],
  providers:[
    HttpService,

  ]
})
export class SingleModule { }

пожалуйста, помогите мне, я застрял здесь.

Answer 1

Также убедитесь, что вызывается метод onAddToCart.Вы можете просто добавить какое-нибудь сообщение в метод, чтобы проверить его.

Answer 2

Вы должны предоставлять услугу, которая должна быть одноразовой, только один раз на корневом уровне.В настоящее время вы предоставляете CartService в двух разных модулях, что приводит к созданию двух разных экземпляров CartService.

Если вы используете Angular 6+, удалите CartService из всех списков провайдеров и добавьте providedIn: 'root'

@Injectable({
  providedIn: 'root',
})
export class CartService {
}

Если вы используете Angular 5 и ниже, добавьте только CartServiceв список поставщиков вашего корневого модуля.