点击Alert弹窗确定按钮后实现Angular组件跳转问题

原生alert()是同步阻塞函数，用户点击「OK」后代码才会继续执行，不需要额外绑定事件，直接在alert之后添加Angular路由跳转逻辑即可。

步骤1：注入Router服务 #

在你的SignalR服务中引入并注入Angular的Router：

import { Injectable } from '@angular/core';
import { HubConnection } from '@microsoft/signalr';
import { Router } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class SignalrService {
  private hubConnection: HubConnection;
  inviteMsg: string;

  constructor(private router: Router) {} // 注入Router

  // 其他代码...
}

步骤2：修改回调逻辑，添加路由跳转 #

更新addListenerInvitation方法，在alert之后调用router.navigate跳转到目标组件：

public addListenerInvitation(){
    this.hubConnection.on("InvitePlayer", (message: string, sendToUser: string) => {
        this.inviteMsg = message;
        console.log("invitation message: ", this.inviteMsg);
        
        // 弹窗提示，用户点击OK后执行后续代码
        alert(this.inviteMsg);
        
        // 替换为你的目标组件路由路径
        this.router.navigate(['/target-component']);
    })
}

进阶方案：自定义弹窗（可选） #

如果需要更灵活的弹窗样式（比如支持确认/取消按钮），可以用Angular组件弹窗替代原生alert。以自定义弹窗组件为例：

1. 创建自定义弹窗组件（比如InvitationAlertComponent），在组件中添加确认按钮并通过EventEmitter返回点击结果。
2. 在SignalR服务中注入ComponentFactoryResolver或直接用Angular Material的MatDialog，打开弹窗并监听关闭事件：

import { MatDialog } from '@angular/material/dialog';
import { InvitationAlertComponent } from './invitation-alert/invitation-alert.component';

constructor(private dialog: MatDialog, private router: Router) {}

public addListenerInvitation(){
    this.hubConnection.on("InvitePlayer", (message: string, sendToUser: string) => {
        this.inviteMsg = message;
        console.log("invitation message: ", this.inviteMsg);
        
        const dialogRef = this.dialog.open(InvitationAlertComponent, {
            data: { message: this.inviteMsg }
        });

        // 监听弹窗关闭，用户点击确认后跳转
        dialogRef.afterClosed().subscribe(result => {
            if (result === 'confirm') {
                this.router.navigate(['/target-component']);
            }
        });
    })
}

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