首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在工艺路线更改时刷新页眉组件

在工艺路线更改时刷新页眉组件
EN

Stack Overflow用户
提问于 2018-08-11 01:36:16
回答 1查看 362关注 0票数 0

我有一个购物车图标在我的标题组件,当用户付款,它从一条路线移动到另一条路线,购物车中的数值不会改变,除非我刷新页面。你知道如何实现它吗?

cartcomponent.ts

代码语言:javascript
运行
复制
 var user:User={name:formObj.value.name,email:formObj.value.email,phone:formObj.value.phone,address:formObj.value.address,payment:formObj.value.gender};
 var currentcart=this.appservice.getproducts();


  this.appservice.userinsert(user,currentcart).subscribe(
      data => {this.emptydata=data;
        console.log(this.emptydata.message);

      },
      error => { console.log(error); // Error if any
      },
      ()=> { 
        //saving cart token to session storage for checking purpose
        this.appservice.storecartoken(this.emptydata.message);
        console.log(this.emptydata.message);

        if(formObj.value.gender=="COD"){
          this.spinner.hide();
          this.appservice.removeall();
          //removing cart so that we can start afresh
          //this._flashMessagesService.show('Thanks For your Order ,Your transaction id is'+this.appservice.getcarttoken(), { cssClass: 'alert-success', timeout: 100000 });
          //this.router.navigate(['/orderstatus']);
          //this.appservice.removecarttoken();//removing cart token as well
          //alert("Thanks For Your Cash On Delivery Order");
          //location.href="/orderstatus";
          this.router.navigateByUrl('/sample', {skipLocationChange: true})
          .then(()=> this.router.navigate(["/orderstatus"]));
          //moving to other page ,here the cart number is still visible        
       }

这是我的header.component.ts

代码语言:javascript
运行
复制
import { Component, OnInit } from '@angular/core';
import { AppService } from '../app.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})

export class HeaderComponent implements OnInit {
  cartremove=true;
  //totalproducts:number;
  constructor(private appservice:AppService) { }
  //totalproducts= this.appservice.gettotalproducts();
  //this function removes cart products and relaod the page
  emptycart(){
    this.appservice.removeall();
    location.reload();
  }
  ngOnInit() {
   if(this.cartremove){
    this.appservice.removeall();
   }
  }    
}

你知道如何实现这一点吗?这样当路线改变时,购物车组件就会被刷新,而不需要重新加载页面

EN

回答 1

Stack Overflow用户

发布于 2018-08-11 01:43:23

您需要使用Subject/Behavior Subject处理它。以下是代码

//服务中

代码语言:javascript
运行
复制
private cartEvent = new Subject<any>();
public cartEvent$ = this.cartEvent.asObservable();

//在购物车组件中使用发出值

代码语言:javascript
运行
复制
service.cartEvent.next(25);

//在头部组件中

您可以使用Subscribe访问它并更新组件

代码语言:javascript
运行
复制
this.sub = service.cartEvent$.subscribe((value)=>{
   this.cartCount = value;
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51791508

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档