javascript - 角度导航时如何防止丢失数据?
问题描述
我想在服务(称为购物车服务)中存储项目数组并将其显示在组件(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 { }
请帮助我,我被困在这里。
解决方案
还要确保onAddToCart
调用该方法。您可以简单地在方法中添加一些日志消息来检查它。
推荐阅读
- android - 为 Android 编译 cryptsetup
- wildfly - JBoss EAP 7.1.0 中的 Wildfly 版本
- php - PHP登录表单未插入用户数据
- sql - Teradata, transactional data where columns have individual update dates
- python - 将索引附加到 for 循环以进行分页
- php - 在 laravel 5.3 中计数
- cordova - 离子与纯科尔多瓦
- python - 用 NA 替换文本文件中特定位置的空格
- gun - GUN 是大数据的好选择吗?
- sql-server - SQL Server 初学者问题