Angular 8结合Angular Material如何在打开组件前显示dialog弹窗？

以下提供两种常用实现方案，可根据你的业务场景选择：

方案1：按钮点击时先触发弹窗，确认后再执行路由跳转（适用仅当前按钮跳转需确认的场景） #

前置准备 #

确保你已在对应模块中引入Angular Material的弹窗依赖：

// app.module.ts 或你的业务模块文件
import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
  imports: [
    // 其他依赖
    MatDialogModule
  ]
})

步骤1：创建通用确认弹窗组件 #

先创建一个可复用的确认弹窗组件ConfirmDialogComponent：

// confirm-dialog.component.ts
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-confirm-dialog',
  template: `
    <h2 mat-dialog-title>{{data.title}}</h2>
    <mat-dialog-content>{{data.content}}</mat-dialog-content>
    <mat-dialog-actions align="end">
      <button mat-button (click)="onCancel()">取消</button>
      <button mat-raised-button color="primary" (click)="onConfirm()">确认</button>
    </mat-dialog-actions>
  `
})
export class ConfirmDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<ConfirmDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: {title: string, content: string}
  ) {}

  onCancel(): void {
    this.dialogRef.close(false);
  }

  onConfirm(): void {
    this.dialogRef.close(true);
  }
}

Angular 8及更早版本需要把该弹窗组件加入对应模块的entryComponents数组中，声明为动态渲染组件

步骤2：修改第一个组件的跳转逻辑 #

在带跳转按钮的第一个组件中注入弹窗服务和路由服务，修改点击事件逻辑：

// 第一个组件的ts文件，示例为first.component.ts
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { ConfirmDialogComponent } from './confirm-dialog.component';

@Component({
  selector: 'app-first-component',
  template: `<button mat-raised-button (click)="handleJump()">跳转至第二个组件</button>`
})
export class FirstComponent {
  constructor(
    private dialog: MatDialog,
    private router: Router
  ) {}

  handleJump(): void {
    // 先打开确认弹窗
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      width: '400px',
      data: {
        title: '跳转确认',
        content: '你确定要跳转到第二个组件吗？'
      }
    });

    // 订阅弹窗关闭结果
    dialogRef.afterClosed().subscribe(result => {
      // 用户点击确认后再执行路由跳转
      if (result) {
        this.router.navigate(['/second-component-path']); // 替换为你的第二个组件实际路由地址
      }
    });
  }
}

方案2：路由守卫管控（适用所有进入第二个组件的场景都需要确认的场景） #

如果所有入口跳转到第二个组件都需要弹出确认框，可通过路由守卫实现全局管控：

步骤1：创建路由守卫 #

// jump-confirm.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { MatDialog } from '@angular/material/dialog';
import { ConfirmDialogComponent } from './confirm-dialog.component';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class JumpConfirmGuard implements CanActivate {
  constructor(private dialog: MatDialog) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      width: '400px',
      data: {
        title: '跳转确认',
        content: '你确定要跳转到第二个组件吗？'
      }
    });

    return dialogRef.afterClosed().pipe(
      map(result => !!result)
    );
  }
}

步骤2：绑定守卫到第二个组件的路由配置 #

// 路由配置文件，示例为app-routing.module.ts
import { JumpConfirmGuard } from './jump-confirm.guard';

const routes: Routes = [
  // 其他路由配置
  {
    path: 'second-component-path',
    component: SecondComponent,
    canActivate: [JumpConfirmGuard] // 绑定守卫
  }
];

该场景下第一个组件的按钮点击可以直接绑定路由跳转逻辑，不需要额外处理，所有进入第二个组件的请求都会先触发守卫的弹窗确认

内容的提问来源于stack exchange，提问作者AchrafBj