在 angular 中导航时如何防止丢失数据？

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

您应该只在根级别提供一次应该是 singleton 服务的服务。 您目前在两个不同的模块中提供CartService ，这会导致创建两个不同的CartService实例。

如果您使用 Angular 6+ 从所有提供者列表中删除CartService并添加providedIn: 'root'

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

如果您使用 Angular 5 及以下版本，只需将CartService添加到根模块的提供程序列表中。

Answer 2

还要确保调用了onAddToCart方法。 您可以简单地在方法中添加一些日志消息来检查它。

Answer 3

确保调用了 onAddToCArt 方法。