标签: candeactivate

我的 Angular 应用程序包含一个简单的应用程序，AuthGuard如下所示，并且从未出现过问题。最近，我将 Angular 版本从 15.1.4 升级到 15.2.0，从那时起，我的 IDE 表明 和CanActivate均已CanActivateChild弃用。

Angular 的官方文档说CanActivate：

已弃用：使用纯 JavaScript 函数代替。

我需要如何调整下面的代码以消除已弃用的警告？

export class AuthGuard implements CanActivate, CanActivateChild {

    constructor(private authService: AuthenticationService) {}

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree  {
        return this.authService.checkLogin()
            .pipe(
                map(() => true),
                catchError(() => {
                    this.router.navigate(['route-to-fallback-page']);
                    return of(false);
                }
            )
        );
    }

    canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | …

我在组件内部有一个函数来检查是否可以通过评估表单状态来离开路线。如果状态与我需要要求离开路线的条件匹配，则会显示一个对话框以确认或取消。我在 canDeactivate 服务中调用此函数，但它会在等待对话框确认之前触发响应。

我已经将 console.log 放入带有组件功能的 canDeactivate 服务中。当不需要确认时，按预期显示 true。但另一方面，当需要确认时，在对话框出现之前显示未定义。

canDeactivateService.ts

@Injectable()
export class ProdutosDeactivateGuard implements CanDeactivate<ExampleComponent> {

  canDeactivate(
      component: ExampleComponent,
      route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): boolean {
      return component.checkStatus();
  }
}

示例组件.ts

checkStatus() {
    if (!this.form.pristine && this.form.touched) {
      const dialogRef = this.dialog.open(DeactivateDialogComponent);
      dialogRef.afterClosed().subscribe(result => {
        if (result === 'true') {
          return true;
        } else {
          return false;
        }
      });
    } else {
      return true;
    }
  }
}

我希望该服务等待确认。我怎么能这样做呢？

在我的 Ionic 5 应用程序中，我有以下导航路径。

PageHome -> PageA ->  PageB

我已经为 PageA 实现了 CanDeactivate 防护。

export class LeavePageGuard implements CanDeactivate<isDeactivatable>{
  canDeactivate(
    component: isDeactivatable
  ): Observable<boolean> | Promise<boolean> | boolean {
    return component.canPageLeave();
  }
}

当用户编辑某些内容并在保存之前按后退按钮时，我会弹出一个弹出窗口来确认用户是否想要离开。

  async canPageLeave() {

    if (this.byPassNav) {
      this.byPassNav = false;
      return true;
    }
    if (JSON.stringify(this.dataOld) != JSON.stringify(this.data)) {

      const alert = await this.alertCtrl.create({
        header: 'Unsaved Chnages',
        message: 'Do you want to leave?',
        buttons: [
          {
            text: 'No',
            role: 'cancel',
            handler: () => { }
          },
          {
            text: …

我无法在 Ionic 5 中实现 canDeactivate 防护。以下是我的代码。

模型.ts

export interface isDeactivatable {
    canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
 }

离开页面.guard.ts

export class LeavePageGuard implements CanDeactivate<isDeactivatable>{
  canDeactivate(
    component: isDeactivatable
  ): Observable<boolean> | Promise<boolean> | boolean {
    console.log('LeavePageGuard');
    return component.canDeactivate();
  }

}

测试页.ts

export class TestPage implements OnInit, isDeactivatable{
      canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
        console.log('canDeactivate in TestPage');
        return true;
      }
}

本地路由.Module.ts

const routes: Routes = [
  {
    path: '',
    component: HomePage,
    children:[
      {
        path: 'test',
        loadChildren: () => …

我已经使用角度表单验证实现了 candeactivate 保护。如果用户单击 ngForm 字段。并尝试导航到不同的选项卡，用户将获得一个自定义确认弹出窗口，其中会显示“放弃更改？”并返回 true 或 false。

这是我的守卫

import { NgForm } from "@angular/forms";
import { ComponentCanDeactivate } from './component-can-deactivate';

export abstract class FormCanDeactivate extends ComponentCanDeactivate {

abstract get form(): NgForm;

canDeactivate(): boolean {
    return this.form.submitted || !this.form.dirty;
}
}

组件保护

import { HostListener } from "@angular/core";

export abstract class ComponentCanDeactivate {

abstract canDeactivate(): boolean;

@HostListener('window:beforeunload', ['$event'])
unloadNotification($event: any) {
    if (!this.canDeactivate()) {
        $event.returnValue = true;
    }
}
}

现在这是我的确认弹出代码。我的问题是如果我使用默认的 confirm() 方法（下面代码中的注释行），它会弹出窗口，并要求是或否，这很完美。但是如果我在这里使用自定义材质弹出窗口，我必须订阅 afterclosed() 方法，该方法异步执行，而我必须等到该方法执行后才能继续。我怎样才能做到这一点？

import { Injectable } from …

我创建了一个用户输入数据的应用程序。在该应用程序上，我想实现路由器防护来拒绝用户返回页面，这样他们就不会丢失数据。如果用户单击浏览器上的后退按钮，它会重新加载页面而不是返回？

我正在考虑使用 canDeactivate 拒绝访问上一页，并使用 Angular Location 来确定用户所在的页面，然后重新加载该页面。但我不知道如何实现这一点。