Angular 12中RouterEvent无法生效，服务未初始化求助

问题根源 #

1. 服务不支持OnInit钩子：ngOnInit是Angular组件/指令的专属生命周期钩子，服务类实现该接口不会触发任何逻辑，你的路由监听代码根本没执行。
2. 懒加载导致服务未实例化：即使服务配置了providedIn: 'root'，Angular默认只会在服务被注入到活跃组件/其他服务时才会实例化它，否则会一直处于未初始化状态。
3. （可选）类名拼写错误：RounterListenerService应为RouterListenerService，虽然不影响功能，但建议修正避免混淆。

修复步骤 #

第一步：修正服务代码 #

移除OnInit相关代码，将路由监听逻辑移到构造函数或自定义初始化方法中：

import { Event, RouterEvent, Router } from '@angular/router';
import { filter } from "rxjs";

@Injectable({
  providedIn: 'root'
})
// 建议修正类名为RouterListenerService
export class RounterListenerService {

  constructor(private router: Router) {
    // 直接在构造函数中启动路由监听
    this.startRouterListening();
  }

  private startRouterListening(): void {
    this.router.events.pipe(
      filter((e: Event): e is RouterEvent => e instanceof RouterEvent)
    ).subscribe((e: RouterEvent) => {
      console.log("路由事件触发:", e);
      // 在这里添加你的路径修改逻辑，示例：
      // if (/* 你的特定条件 */) {
      //   this.router.navigate(['/target-path']);
      // }
    });
  }
}

第二步：触发服务实例化 #

选以下两种方式之一即可：

方式1：注入到根组件

在AppComponent的构造函数中注入该服务，应用启动时根组件初始化会触发服务实例化：

// app.component.ts
import { Component } from '@angular/core';
import { RounterListenerService } from './rounter-listener.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 注入服务即可触发实例化
  constructor(private routerListener: RounterListenerService) {}
}

方式2：用APP_INITIALIZER强制初始化

在根模块中配置APP_INITIALIZER，让应用启动时就初始化服务：

// app.module.ts
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { RounterListenerService } from './rounter-listener.service';

// 初始化工厂函数
function initRouterListener(service: RounterListenerService) {
  return () => Promise.resolve();
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot([/* 你的路由配置 */])
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initRouterListener,
      deps: [RounterListenerService],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

注意事项 #

• 修改路径时要添加条件判断，避免无限触发路由事件（比如判断当前路由是否已经是目标路径，再执行导航）。
• 建议修正服务类名的拼写错误，提升代码可读性。

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