如何在Angular Router的NavigationStart事件中获取静态路由数据

方案一：利用RoutesRecognized事件（推荐） #

RoutesRecognized是Angular路由在匹配完成后、导航结束前触发的事件，此时已经能拿到目标路由的所有静态data，时机比NavigationEnd早，既支持应用内导航，也能处理直接访问URL的场景，完美满足你在路由开始加载时隐藏导航的需求。

实现代码

import { Router, RoutesRecognized, ActivatedRouteSnapshot } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { filter, map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `
    <nav *ngIf="!hideNav"></nav>
    <router-outlet></router-outlet>
  `
})
export class AppComponent implements OnInit {
  hideNav = false;

  constructor(private router: Router) {}

  ngOnInit(): void {
    // 处理直接访问URL的初始加载场景
    this.hideNav = this.getDeepestRouteData(this.router.routerState.snapshot.root);

    // 监听路由识别完成事件，实时更新导航状态
    this.router.events.pipe(
      filter(event => event instanceof RoutesRecognized),
      map((event: RoutesRecognized) => event.state.root),
      map(root => this.getDeepestRouteData(root))
    ).subscribe(hideNavigation => {
      this.hideNav = hideNavigation;
    });
  }

  // 递归获取最深层级路由的hideNavigation配置
  private getDeepestRouteData(route: ActivatedRouteSnapshot): boolean {
    let currentRoute = route;
    while (currentRoute.firstChild) {
      currentRoute = currentRoute.firstChild;
    }
    return currentRoute.data?.hideNavigation ?? false;
  }
}

方案优势

• 触发时机更早：在路由组件开始加载前就更新导航状态，避免视觉闪烁
• 全场景兼容：同时支持直接访问URL和应用内跳转
• 适配懒加载路由：即使是懒加载模块内的路由，只要data定义在路由配置中，就能正确获取

方案二：在NavigationStart中匹配顶层路由（仅适用于顶层路由配置） #

如果必须在NavigationStart事件中处理，可通过解析URL匹配顶层路由配置来获取静态data，但此方法仅支持hideNavigation定义在顶层路由的场景，无法获取懒加载子模块内的路由数据。

实现代码

import { Router, NavigationStart, UrlTree } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `
    <nav *ngIf="!hideNav"></nav>
    <router-outlet></router-outlet>
  `
})
export class AppComponent implements OnInit {
  hideNav = false;

  constructor(private router: Router) {}

  ngOnInit(): void {
    // 处理初始加载场景
    this.checkTopLevelRouteData(this.router.url);

    this.router.events.pipe(
      filter(event => event instanceof NavigationStart)
    ).subscribe((event: NavigationStart) => {
      this.checkTopLevelRouteData(event.url);
    });
  }

  private checkTopLevelRouteData(url: string): void {
    const urlTree = this.router.parseUrl(url);
    // 获取URL的第一个路径段
    const firstSegment = urlTree.root.children['primary'].segments[0]?.path ?? '';
    
    // 匹配顶层路由配置
    const matchedRoute = this.router.config.find(route => 
      route.path === firstSegment || (route.path === '' && firstSegment === '')
    );

    this.hideNav = matchedRoute?.data?.hideNavigation ?? false;
  }
}

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