Angular中用navigateByUrl传递state数据报错，求正确实现方法

你遇到的Cannot read property 'extras' of null错误，核心原因是this.router.getCurrentNavigation()只有在路由导航正在进行的过程中才会返回当前导航对象——一旦导航完成（比如组件初始化完毕、页面刷新后），这个方法就会返回null，直接在ngOnInit里调用它自然会报错。

一、修正你的现有实现 #

你的传参方式是正确的（用navigateByUrl的state选项传递临时数据），只需要调整目标组件的获取方式：

方法1：直接读取浏览器历史状态（最简便）

Angular会把路由state数据存在浏览器的history.state中，你可以直接访问：

import { Component, OnInit } from '@angular/core';

@Component({
  // 组件元数据
})
export class ProfileContactViewComponent implements OnInit {
  ngOnInit(): void {
    console.log(window.history.state.hello); // 输出 "world"
  }
}

方法2：通过ActivatedRoute获取

如果你更倾向于用Angular的路由API，可以通过ActivatedRoute的路由快照获取：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  // 组件元数据
})
export class ProfileContactViewComponent implements OnInit {
  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    const state = this.route.routerState.snapshot.root.firstChild?.extras.state;
    console.log(state?.hello); // 输出 "world"
  }
}

⚠️ 注意：路由state传递的数据是临时的，页面刷新后会丢失，如果需要持久化数据，不要用这种方式。

二、其他更合适的视图间传参方案 #

根据你的业务场景，还可以选择以下更常用的传参方式：

1. 路由参数（路径/查询参数）

适合传递需要在URL中可见的公开数据（比如ID、筛选条件）：

• 路径参数：
  先在路由配置中定义参数：

  const routes: Routes = [
    { path: 'profile/:userId', component: ProfileContactViewComponent }
  ];
  

  导航时传递：

  this.router.navigateByUrl('/profile/123');
  

  目标组件获取：

  const userId = this.route.snapshot.paramMap.get('userId'); // 输出 "123"
  

• 查询参数：
  导航时传递：

  this.router.navigateByUrl('/profile', { queryParams: { hello: 'world' } });
  

  目标组件获取：

  const hello = this.route.snapshot.queryParamMap.get('hello'); // 输出 "world"
  

2. 共享服务（Service）

适合传递不需要暴露在URL中的复杂数据（比如对象、临时状态），且数据不会因刷新丢失（只要服务是单例的）：
首先创建一个共享服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataShareService {
  private dataSubject = new BehaviorSubject<any>(null);
  public sharedData$ = this.dataSubject.asObservable();

  setSharedData(data: any) {
    this.dataSubject.next(data);
  }
}

发送组件传递数据：

constructor(private dataService: DataShareService, private router: Router) { }

// 先传数据再导航
this.dataService.setSharedData({ hello: 'world' });
this.router.navigateByUrl('/profile');

目标组件接收数据：

constructor(private dataService: DataShareService) { }

ngOnInit(): void {
  this.dataService.sharedData$.subscribe(data => {
    if (data) {
      console.log(data.hello); // 输出 "world"
    }
  });
}

内容的提问来源于stack exchange，提问作者Maximilian von Unwerth