Javascript 当用户试图移出angular 6中的任何组件时，如何提示用户

我有一个付款页面，付款组件为-

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;

}   }

现在，我想提醒用户，如果他试图后退或尝试单击任何链接，而不单击支付组件中的paypal支付按钮，我已通过制作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; 
          } 
    }

---

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

您的CanDeactivate路由守卫必须返回以下其中一个：布尔值、承诺值、可观察值

在您的情况下，最好使用后者，因为您需要用户采取行动来决定CanDeactivate care是否运行。这会使您的保护异步

因为该方法必须始终返回相同的类型，所以！hasChanges（）myst还返回一个可观察的

请尝试以下代码：

import{Observable，create}来自'rxjs'；
从“@angular/core”导入{Injectable}；
从“@angular/router”导入{CanDeactivate}；
从“./payment/payment.component”导入{PaymentComponent}；
从“./payment/payment.guard”导入{PaymentGuard}；
@可注射（）
导出类ConfirmDeactivateGuard实现CanDeactivate{
canDeactivate（目标：PaymentComponent）：可观察{
返回可观察的。创建（函数（观察者）{
如果（！target.hasChanges（））{
观察者：下一个（正确）；
}else if（window.confirm（'是否确实要取消？'））{
观察者：下一个（正确）；
}否则{
观察者：下一个（假）；
}
});
} 
}

您能准确描述发生了什么吗？例如，控制台中是否有错误？没有错误，但我没有得到预期的结果：（我是否也必须更改hasChanges函数？因为您现在已经对其进行了硬编码，它至少应该显示对话框。我必须运行此示例以查看问题的原因。@LOGAN我看到您接受了解决方案，我认为它有效吗？

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 { }