如何在Angular的app-routing-module中使用来自服务的数据

问题核心 #

Angular 中的 routes 路由配置为静态常量，会在模块初始化阶段就完成取值固化，无法直接监听服务的 Observable 流实现动态更新 redirectTo 的值，需要通过以下两种方案实现需求：

方案1：用路由守卫处理根路径重定向逻辑（推荐） #

该方案可以在用户访问根路径时，实时从服务中取最新的ID完成跳转，不需要修改原有路由结构：

1. 新增重定向守卫文件 redirect.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators';
import { SenderService } from './sender.service';

@Injectable({
  providedIn: 'root'
})
export class RedirectGuard implements CanActivate {
  constructor(private senderService: SenderService, private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<UrlTree | boolean> {
    return this.senderService.SharedDailyListID.pipe(
      take(1),
      map(id => {
        // 规避初始值为null的问题，ID存在则跳对应路由，否则跳默认ID
        const targetId = id || '619bcdef2888490b5867bcbe';
        return this.router.parseUrl(`/list/${targetId}`);
      })
    );
  }
}

2. 修改 app-routing.module.ts 配置，替换原有静态重定向逻辑：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { RedirectGuard } from './redirect.guard';

const routes: Routes = [
  { 
    path: '', 
    pathMatch: 'full',
    canActivate: [RedirectGuard]
  },
  { path: 'list/:id', component: HomeComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

方案2：全局订阅ID变化自动跳转 #

如果需要SharedDailyListID变动时自动同步跳转到对应路由，直接在根组件app.component.ts中订阅流即可：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { SenderService } from './sender.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private senderService: SenderService, private router: Router) {}

  ngOnInit() {
    this.senderService.SharedDailyListID.subscribe(id => {
      if (!id) return;
      // 避免重复跳转相同路由，可加判断
      const currentRouteId = this.router.routerState.root.firstChild?.snapshot.params['id'];
      if (currentRouteId !== id) {
        this.router.navigate([`/list/${id}`]);
      }
    })
  }
}

注意事项 #

• 你当前BehaviorSubject的初始值为null，记得加非空判断避免生成/list/null这类无效路由
• 如果需要应用启动时就拿到正确的ID、不需要先跳默认ID，可以配合APP_INITIALIZER在应用启动阶段先完成ID的初始化赋值，再启动路由模块

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