怎么样在nz-modal中添加Angular的路由守卫进行二次确认？

在ng-zorro的nz-modal中添加Angular路由守卫进行二次确认，主要是为了控制用户的权限或确认他们是否已经离开某个页面并愿意执行操作。通常，你会将这种操作与CanDeactivateGuard配合使用。CanDeactivateGuard是在用户试图离开当前路由时触发的一个生命周期钩子，允许你在他们离开之前进行验证。

以下是一个基本的例子：

1. 首先，在你的模块中导入CanDeactivateModule以及相应的Guard:

import { NgModule } from '@angular/core';
import { RouterModule, CanDeactivateGuard } from '@angular/router';
import { YourGuardComponent } from './your-guard.component';

@NgModule({
  imports: [RouterModule.forChild([...])],
  providers: [
    {
      provide: CanDeactivateGuard,
      useClass: YourGuardComponent
    }
  ]
})
export class YourRoutingModule {}

2. 创建YourGuardComponent，它需要实现CanDeactivate接口：

import { Component, CanDeactivate } from '@angular/core';
import { ConfirmationService, ConfirmationPopinRef } from 'ng-zorro-antd/modal';

@Component({
  selector: 'app-your-guard',
  template: `
    <ng-template #confirmationTemplate>
      是否确定要离开？
      <button nz-button (click)="onCancel()">取消</button>
      <button nz-button (click)="onConfirm($event)">确认</button>
    </ng-template>

    <ng-container *ngIf="showConfirmation">
      <ng-template #content let-ref="ref">{{ confirmMessage }}</ng-template>
      <nz-modal [(nzVisible)]="showConfirmation" [nzTitle]="'确认离开'" [nzContent]="confirmationTemplate">
        <ng-template nzBackdrop></ng-template>
      </nz-modal>
    </ng-container>
  `,
})
export class YourGuardComponent implements CanDeactivate {
  showConfirmation = false;
  confirmMessage = '这是你的二次确认消息';
  
  constructor(private confirmationService: ConfirmationService) {}

  canDeactivate(): boolean | Promise<boolean> | undefined {
    this.showConfirmation = true;
    const ref = this.confirmationService.create();
    return new Promise((resolve) => {
      ref.afterClosed().subscribe(() => {
        if (ref.result === 'confirm') {
          // 用户点击确认，可以执行离开操作并返回true
          resolve(true);
        } else {
          // 用户点击取消或者直接关闭确认框，返回false阻止离开
          resolve(false);
        }
      });
    });
  }

  onCancel() {
    this.showConfirmation = false;
    this.confirmationService.destroy();
  }

  onConfirm(event: any) {
    this.confirmed = event;
    this.showConfirmation = false;
    this.confirmationService.destroy();
  }
}

在这个例子中，当用户尝试离开时，`canDeactivate()`方法会被调用，显示一个确认模态。如果用户确认离开，`resolve(true)`；如果用户取消，`resolve(false)`。