Candeactivate в angular 6 не работает должным образом

Это мой платежный component.ts, я использовал внутри него Candeactivate, так что я получаю подсказку всякий раз, когда пользователь пытается перейти от этого компонента к другому. Он работает нормально, теперь проблема в том, что когда пользователь завершает платеж, и когда я пытаюсь перейти на другую страницу, он запрашивает ту же подсказку

import { Component, OnInit } from '@angular/core';
import { PayPalConfig, PayPalEnvironment, PayPalIntegrationType } from 'ngx-paypal';
import { AppService } from '../app.service';
import { Payment } from '../models/payment.model';
import { Router } from '@angular/router';
@Component({
  selector: 'app-payment',
  templateUrl: './payment.component.html',
  styleUrls: ['./payment.component.css']
})
export class PaymentComponent implements OnInit {
//totalpay:number;
payment:Payment;
changesSaved=false;
  constructor(private appservice:AppService,private router:Router) { }

  ngOnInit() {
    this.initConfig();

   }


  public payPalConfig?: PayPalConfig;

hasChanges(){
  //return true;
  return this.changesSaved;

}    
  private initConfig(): void {
    this.changesSaved=true;//making changes saved true here
    console.log(this.changesSaved); // it prints true
    this.payPalConfig = new PayPalConfig(PayPalIntegrationType.ClientSideREST, PayPalEnvironment.Sandbox, {
      commit: true,
      client: {
        sandbox: 'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R'
      },
      button: {
        label: 'paypal',
      },
      onPaymentComplete: (data, actions) => {


        console.log("success");
        console.log(data);
        //storing customerid from session token as well
        this.payment={customerid:this.appservice.getcarttoken(),intent:data.intent,orderID:data.orderID,payerID:data.payerID,paymentID:data.paymentID,paymentToken:data.paymentToken,billingid:"NA",status:"Payment Success"}
        this.appservice.paypalpayment(this.payment).subscribe( 
          data => {
          console.log(data);

        },
        error => { console.log(error); // Error if any
        },
        ()=> {
          this.appservice.removeall();//removing cart so that we can start afresh

          this.router.navigate(['/orderstatus']);
        }
      )
      },
      onCancel: (data, actions) => {
        //this.changesSaved=true;
        console.log("Cancel");
        console.log(data);
       this.payment={customerid:this.appservice.getcarttoken(),intent:"sale",orderID:"NA",payerID:"NA",paymentID:"User Cancelled", paymentToken:"User Cancelled",billingid:"NA",status:"Payment Failed"}
        this.appservice.paypalpayment(this.payment).subscribe( 
          data => {
          console.log(data);

        },
        error => { 
          console.log(error); // Error if any
        },
        ()=> {
          //this.appservice.removeall();//removing cart so that we can start afresh

          this.router.navigate(['/paymentfail']);
        }
      )
        console.log(data);
        //this.appservice.paymentstatus("success",data.intent,data.orderID,data.payerID,data.paymentID,data.paymentToken);
      },
      onError: (err) => {
        console.log("Error");
        console.log(err);
      },
      transactions: [{
        amount: {
          currency: 'USD',
          total:this.appservice.gettotalcartvalue()
        }
      }]
    });
  }
}

А это мой платежный гвардеец.

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';

import { PaymentComponent } from './payment/payment.component';
import { CartComponent } from './cart/cart.component';
@Injectable() 
export class CanDeactivateGuard implements CanDeactivate<PaymentComponent> {
  canDeactivate(target: PaymentComponent): Observable<boolean> { 
    return Observable.create(function(observer) {
      if (!target.hasChanges()) {
        observer.next(true);
      } else if(window.confirm('Do you really want to cancel?')) {
        observer.next(true);
      } 
      else {
        observer.next(false);
      }
    });
  } 
}

Я не могу изменить маршрут даже после того, как изменил значение переменной на true, есть идеи, почему он не работает?

3
0
1 284
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Do this ,see comments in code

canDeactivate(target: PaymentComponent): Observable<boolean> { 
    return Observable.create(function(observer) {
      if (target.hasChanges()) {// removed not from here
        observer.next(true);
      } else if(window.confirm('Do you really want to cancel?')) {
        observer.next(true);
      } 
      else {
        observer.next(false);
      }
    });
  } 
}


  onPaymentComplete: (data, actions) => {
        this.changesSaved=true;// change the variable here
        console.log(this.changesSaved);


        console.log("success");
        console.log(data);
        //storing customerid from session token as well
        this.payment={customerid:this.appservice.getcarttoken(),intent:data.intent,orderID:data.orderID,payerID:data.payerID,paymentID:data.paymentID,paymentToken:data.paymentToken,billingid:"NA",status:"Payment Success"}
        this.appservice.paypalpayment(this.payment).subscribe( 
          data => {
          console.log(data);

        },
        error => { console.log(error); // Error if any
        },
        ()=> {
          this.appservice.removeall();//removing cart so that we can start afresh

          this.router.navigate(['/orderstatus']);
        }
      )
      },
      onCancel: (data, actions) => {
        this.changesSaved=true;// change the variable here
        console.log(this.changesSaved);
        //this.changesSaved=true;
        console.log("Cancel");
        console.log(data);
       this.payment={customerid:this.appservice.getcarttoken(),intent:"sale",orderID:"NA",payerID:"NA",paymentID:"User Cancelled", paymentToken:"User Cancelled",billingid:"NA",status:"Payment Failed"}
        this.appservice.paypalpayment(this.payment).subscribe( 
          data => {
          console.log(data);

        },

Поскольку вы вызываете конфигурацию платежа в ngoninit (), поэтому изначально он устанавливает значение true. Я надеюсь, что это поможет

Другие вопросы по теме