Question

所以我想在用户尝试导航到其他页面时显示确认弹出窗口。我读到有关hostListner和canActivate的信息……但是我不知道从哪里开始！

请帮助！TIA。

Answer 1

首先，您需要为路由创建防护创建一个名为can-exit.guard.ts的文件


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

import {Observable} from 'rxjs';

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

@Injectable()
export class CanExitGuard implements CanDeactivate<CanExit> {
  canDeactivate(component: CanExit) {
    if (component.canDeactivate) {
      return component.canDeactivate();
    }
    return true;
  }
}

创建另一个文件 canExit.ts –此文件用于返回承诺值。

import {Observable} from 'rxjs';

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

在您的应用程序中添加以上文件后，请按照以下步骤配置路由器文件

const routes: Routes = [
  {
    path: 'your Path name',
    component: YourComponent ,
    canDeactivate: [CanExitGuard],
  }
];
// use this configuration in every path  of your application

您的组件文件需要进行一些更改，包括可以在组件中激活


import { CanExit } from './../can-exit.guard';  //important


@Component({
  // your selector and component defs
})
export class YourComponent implements OnInit, CanExit {

  constructor() { }

  ngOnInit() {
  }

  canDeactivate(): Promise<any> | boolean {
    const confirmResult = confirm('Are you sure you want to leave this page ? ');
    if (confirmResult === true) {
      return true;
    } else {
      return false;
    }
  }

}

希望这会有所帮助

有没有一种方法可以检测用户何时以角度导航到其他组件？

1 个答案: