Question

这是我的标头组件，其中包含购物车图标以及用于清空购物车的锚标记。仅当购物车中有商品时，我才会显示锚标记。 headecomponent.ts

import { Component,OnInit } from '@angular/core';
import { AppService } from '../app.service';
import { MessageService } from '../message.service';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  flag=false;
  subscription:any;
  //totalproducts:number;
  constructor(public appservice:AppService,private msg:MessageService,private ss: SharedService) {
    this.subscription = this.ss.getEmittedValue()
      .subscribe(

       ()=>{
         this.changeflag();
       }

      );

   }
  //totalproducts= this.appservice.gettotalproducts();
  //this function removes cart products and relaod the page
  emptycart(){
   this.appservice.removeall();
    location.reload();
    this.flag=false;
  }
  changeflag(){
    this.flag=true;
  }

  ngOnInit() {

   //this.appservice.removecarttoken();
   //this hows the empty red one if cart gets filled


  }


}

这是我的产品组件，我在其中添加产品并调用共享服务，该服务发出事件，以便它在上述组件中被订阅并更改标志

import { Component,OnInit } from '@angular/core';
import { Product } from '../models/product.model';
import { AppService } from '../app.service';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit  {
  products :Product[]=[
{id:"xy1",name:"SSR-3000-15-POS-TERMINAL",picture:"a.jpg",price:1375,category:"screentills"},
{id:"xy2",name:"SSR-T86E SCALE",picture:"b.jpg",price:1,category:"cashregister"},
{id:"xy3",name:"SSR-300-RECEIPT-PRINTERS",picture:"c.jpg",price:451,category:"printers"},
{id:"xy5",name:"EPSON-DOT-MATRIX-PRINTER",picture:"d.jpg",price:560,category:"kitchenprinter"},
{id:"xy6",name:"CD-24 – Heavy duty cash drawer 24v",picture:"h.jpg",price:198.00,category:"cashdrawers"},
{id:"xy7",name:"Portable Data Terminal",picture:"i.jpg",price:550.00,category:"barcodescanner"},
{id:"xy8",name:"Magstripe Card Reader",picture:"h.jpg",price:120.00,category:"accessories"},
{id:"xy9",name:"SSR-C86H 2017 – 15″ Touch screen Cash Register with Software – 2017 model",picture:"e.jpg",price:1560.00,category:"cashregister"},
{id:"xy10",name:"SSR-C86H – 15″ Touch screen Cash Register with Software",picture:"e.jpg",price:1460.00,category:"cashregister"},
{id:"xy11",name:"SSR-86E 2017 – 12″ Touch screen Cash Register with Software – 2017 model",picture:"f.jpg",price:1280.00,category:"cashregister"},
{id:"xy12",name:"SSR-86E – 12″ Touch screen Cash Register with Software",picture:"f.jpg",price:1180.00,category:"cashregister"},
{id:"xy13",name:"SSR-250 Receipt Printers",picture:"g.jpg",price:385.00,category:"printers"},
{id:"xy14",name:"Omni-352 (Omni Directional Scanner)",picture:"j.jpg",price:330.00,category:"barcodescanner"},
{id:"xy15",name:"SSR-10.4 – 10.4″ Secondary Screen",picture:"k.jpg",price:440.00,category:"accessories"},
{id:"xy16",name:"SSR-8.4 – 8.4″ Secondary Screen",picture:"m.jpg",price:330.00,category:"accessories"},
{id:"xy17",name:"VFD-890 (VFD Customer Display)",picture:"l.jpg",price:160.00,category:"accessories"},

  ];
  //
  //dependency injection of appservice
  constructor(private appservice:AppService,private ss: SharedService) { }

  addproduct(product){

    //the method return true if success;
   this.appservice.addtocart(product,1)
    alert("Product added to the cart");
    this.ss.change();//emiiting event
   }


  ngOnInit() {
    this.appservice.removecarttoken();

  }
}

这是我的共享服务

import { Component, Injectable,Input,Output,EventEmitter } from '@angular/core';
//this is for removing empty when cart is empty
@Injectable({
  providedIn: 'root'
})
export class SharedService {
  @Output() fire: EventEmitter<any> = new EventEmitter();
  constructor() {
    console.log('shared service started');
  }

  change() {
   console.log('change started'); 
    this.fire.emit(true);
  }

  getEmittedValue() {
    return this.fire;
  }
}

它工作正常，没有问题，但是当我重新加载页面时，锚标记再次变得不可见，即使在刷新页面后，如何使这些更改也持续下去？

这是我的header.component.html

        <a routerLink="/cart">
          <i class="fa fa-shopping-cart" aria-hidden="true"></i>
          <span id="checkout_items" class="checkout_items">{{appservice.gettotalproducts()}}</span>
        </a>

      </li>
      <li *ngIf="this.flag"><a  href="#" style="margin-left:8px; color:red"(click)="emptycart()" >empty</a></li>

任何想法如何实现？？好吧，我也尝试过在ngOnit中调用subscribe，但是没有成功。

Answer 1

要在页面刷新之间保留数据，可以使用localStorage或sessionStorage https://www.w3schools.com/html/html5_webstorage.asp。

请参阅此问题，其中有一个建议的软件包可与localStorage Angular 5 Ngrx State lost during browser page refresh

一起使用

重新加载页面后，事件发射器的变化令人讨厌

1 个答案: