javascript - Angular 6 中的 CanDeactivate 无法正常工作

Question

这是我的付款 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()
        }
      }]
    });
  }
}

这是我的付款guard.ts

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 之后我也无法更改路线，知道为什么它不起作用吗？

Answer 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。我希望它有所帮助