SignalR事件触发Angular页面重定向后组件无法正常工作

我定义了leave()方法用于页面重定向到仪表盘：

leave() {
    this.router.navigate(['app', 'dashboard']);
}

通过按钮点击调用该方法时功能正常，但当通过SignalR的Subject类型事件OnLeaveAll触发调用时，页面虽成功跳转，但仪表盘页面的组件无法正常加载：

ngOnInit(): void {
    this.hubService.OnLeaveAll.subscribe(x => {
      this.leave();
    });
}

SignalR的回调事件默认运行在Angular的NgZone之外，这会导致Angular的变更检测机制无法感知到导航后的组件状态变化，从而无法正确渲染仪表盘页面的组件。

方案1：使用NgZone包裹导航操作 #

注入NgZone服务，将leave()方法中的导航逻辑放到run()方法内，确保代码运行在Angular的变更检测上下文里：

import { NgZone } from '@angular/core';
import { Router } from '@angular/router';

// 构造函数注入NgZone和Router
constructor(private router: Router, private ngZone: NgZone) {}

leave() {
    this.ngZone.run(() => {
        this.router.navigate(['app', 'dashboard']);
    });
}

方案2：手动触发变更检测 #

如果不想用NgZone，也可以注入ChangeDetectorRef，在导航后手动触发变更检测（优先推荐方案1）：

import { ChangeDetectorRef } from '@angular/core';
import { Router } from '@angular/router';

constructor(private router: Router, private cdr: ChangeDetectorRef) {}

leave() {
    this.router.navigate(['app', 'dashboard']).then(() => {
        this.cdr.detectChanges();
    });
}

额外注意：清理订阅避免内存泄漏 #

在组件销毁时取消对OnLeaveAll的订阅，防止内存泄漏：

import { Subscription } from 'rxjs';

private leaveSubscription!: Subscription;

ngOnInit(): void {
    this.leaveSubscription = this.hubService.OnLeaveAll.subscribe(x => {
      this.leave();
    });
}

ngOnDestroy(): void {
    this.leaveSubscription.unsubscribe();
}

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