Question

我有一个付款页面，其中的付款部分为-

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();

   }




hasChanges(){
  return true;

}   }

现在，我想提示用户是否要移回或单击任何链接，而无需单击付款组件中的贝宝付款按钮，我通过制作Paymentguard.ts使用了Candeactivate

  import { Injectable } from '@angular/core'; 
    import { CanDeactivate } from '@angular/router'; 
    import { PaymentComponent } from './payment/payment.component';
     import { PaymentGuard} from './payment/payment.guard';


    @Injectable() 
    export class ConfirmDeactivateGuard implements CanDeactivate<PaymentComponent> {

         canDeactivate(target: PaymentComponent) { 
              if (target.hasChanges()) { 
                   return window.confirm('Do you really want to cancel?'); 
              } 
              return true; 
          } 
    }

这是我在app.module.ts中的路由

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { BannerComponent } from './banner/banner.component';
import { ProductsComponent } from './products/products.component';
import { BodyComponent } from './body/body.component';
import { BestsellersComponent } from './bestsellers/bestsellers.component';
import { FooterComponent } from './footer/footer.component';
import { BenefitComponent } from './benefit/benefit.component';
import { CombinedComponent } from './combined/combined.component';
import { CartComponent } from './cart/cart.component';
import { StorageServiceModule} from 'angular-webstorage-service';
import { FormsModule } from '../../node_modules/@angular/forms';
import { NgxPayPalModule } from 'ngx-paypal';
import { HttpClientModule } from '@angular/common/http';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { PaymentComponent } from './payment/payment.component';
import { AuthGuard } from './auth.guard';
import { FlashMessagesModule } from 'angular2-flash-messages';
import { FinalstatusComponent } from './finalstatus/finalstatus.component';
import { ConfirmDeactivateGuard } from './payment.guard';
import { PaymentfailComponent } from './paymentfail/paymentfail.component';


const routes: Routes = [
  { path: 'cart', component: CartComponent },
  { path: 'about', component: AboutComponent },
  { path: '', component: CombinedComponent },

  { path: 'payment', component: PaymentComponent,canActivate:[AuthGuard],canDeactivate[ConfirmDeactivateGuard]},
  { path: 'orderstatus', component: FinalstatusComponent,canActivate:[AuthGuard] },
  { path: 'paymentfail', component: PaymentfailComponent,canActivate:[AuthGuard] },
  { path: 'contact', component: ContactComponent },

];

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    BannerComponent,
    ProductsComponent,
    BodyComponent,
    BestsellersComponent,
    FooterComponent,
    BenefitComponent,
    CombinedComponent,
    CartComponent,
    AboutComponent,
    ContactComponent,
    PaymentComponent,
    FinalstatusComponent,
    PaymentfailComponent,

  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    StorageServiceModule,
    FormsModule,
    NgxPayPalModule,
    HttpClientModule,
    FlashMessagesModule.forRoot()

  ],
  providers: [AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

我不知道为什么它不起作用，不知道如何实现？？

Answer 1

您的CanDeactivate路由保护程序必须返回以下之一：布尔值，Promise和Observable。

在您的情况下，最好使用后者，因为您依赖用户采取行动来决定是否运行CanDeactivate护理。这使您的防护异步。

因为该方法必须始终返回相同的类型，所以！hasChanges（）之谜也将返回可观察的结果。

在下面尝试此代码：

import { Observable, create } from 'rxjs';
import { Injectable } from '@angular/core'; 
import { CanDeactivate } from '@angular/router'; 
import { PaymentComponent } from './payment/payment.component';
import { PaymentGuard} from './payment/payment.guard';

@Injectable() 
export class ConfirmDeactivateGuard 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);
      }
    });
  } 
}

我希望这会有所帮助！

编辑：我将所有内容移到了观察者内部

当用户尝试移出角度6中的任何组件时如何提示用户

1 个答案: