Angular 18路由导航state未定义问题求助

问题原因 #

Angular 18对路由导航的内部处理逻辑做了调整，history.state的结构发生变化（仅保留navigationId），且router.getCurrentNavigation()仅在导航过程中有效，导航结束后会被置为null，导致之前的订阅方式无法持久保存state。

解决方案 #

方案1：通过ActivatedRoute.navigation获取（推荐）

利用ActivatedRoute提供的navigation属性，在组件初始化时直接读取当前导航的state：

import { ActivatedRoute } from '@angular/router';
import { myObject } from './your-types';

export class TargetComponent {
  state?: myObject;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 从当前导航的extras中获取state
    this.state = this.route.navigation?.extras.state as myObject || this.state;
  }
}

route.navigation会保留当前导航的完整信息，只要组件是由该导航激活的，就可以稳定获取到state。

方案2：在ngOnInit中调用router.getCurrentNavigation()

组件初始化阶段仍处于导航过程中，此时getCurrentNavigation()尚未被清除，可直接读取：

import { Router } from '@angular/router';
import { myObject } from './your-types';

export class TargetComponent {
  state?: myObject;

  constructor(private router: Router) {}

  ngOnInit(): void {
    const currentNav = this.router.getCurrentNavigation();
    this.state = currentNav?.extras.state as myObject || this.state;
  }
}

方案3：启用组件输入绑定（Angular 16+）

如果你的项目启用了路由组件输入绑定（Angular 18默认可通过withComponentInputBinding()开启），可以直接通过@Input()接收state：

1. 首先在路由配置中启用输入绑定：

import { provideRouter, withComponentInputBinding } from '@angular/router';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withComponentInputBinding())
  ]
};

2. 在目标组件中定义输入属性：

import { Input } from '@angular/core';
import { myObject } from './your-types';

export class TargetComponent {
  @Input() state?: myObject;
}

路由会自动将跳转时传入的state映射到组件的输入属性上。

注意事项 #

• 避免依赖history.state直接获取，Angular后续版本可能继续调整其内部结构，使用官方提供的路由API更可靠。
• 若使用订阅路由事件的方式，需确保在导航完成前完成state的赋值，且避免在事件流结束后依赖getCurrentNavigation()。

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