Angular路由状态的获取、清除及同页面跳转状态异常问题咨询

问题场景 #

在同一页面执行路由跳转（等效于刷新操作）时携带state数据，目前仅能通过history获取状态且无法清除。使用getCurrentNavigation()在页面刷新后无法触发，尝试在DoCheck钩子中获取时router对象返回undefined。

现有实现代码 #

跳转逻辑：

async refresh() {
  // 等效于原地跳转
  this.router.navigateByUrl('form',{
    state: {
      name: 'jack',
      age: 252
    },
  })
}

尝试获取状态的失败代码：

ngDoCheck(): void {
  // this.init(this.router);
  const navigation = this.router.getCurrentNavigation() 
  const extras = navigation?.extras;
  const state = extras?.state;
  console.log(navigation,'navigation');
  console.log(state,'state');
  console.log('ngDoCheck')
}

常规处理方法 #

1. 设置路由状态 #

你当前使用navigateByUrl/navigate时传入state参数的方式是Angular官方推荐的标准写法，完全可行：

// 两种写法均支持
this.router.navigate(['/form'], { state: { name: 'jack', age: 252 } });
// 或
this.router.navigateByUrl('/form', { state: { name: 'jack', age: 252 } });

2. 获取路由状态 #

分两种场景针对性处理：

• 首次导航/原地跳转时：在组件ngOnInit或构造函数中通过getCurrentNavigation()获取，注意该方法仅在导航过程中有效，页面加载完成后会返回null：

  ngOnInit(): void {
    const navigation = this.router.getCurrentNavigation();
    if (navigation?.extras.state) {
      const state = navigation.extras.state;
      // 处理状态数据
      console.log(state);
    }
  }
  

• 页面刷新后：getCurrentNavigation()会失效，此时直接从浏览器history对象中读取即可：

  ngOnInit(): void {
    // 优先取当前导航的state，降级取history.state
    const navigationState = this.router.getCurrentNavigation()?.extras.state;
    const state = navigationState || window.history.state;
    if (state) {
      console.log(state);
    }
  }
  

  你之前在DoCheck中遇到router为undefined，是因为DoCheck触发时机过早，依赖注入的Router还未完成初始化，禁止在DoCheck中处理路由状态，改用ngOnInit即可解决。

3. 清除路由状态 #

Angular路由状态最终存储在浏览器history中，清除方式分两种：

• 获取数据后清除当前状态：处理完状态数据后，用history.replaceState修改当前历史记录的状态，避免污染后续导航：

  ngOnInit(): void {
    const state = this.router.getCurrentNavigation()?.extras.state || window.history.state;
    if (state) {
      // 处理数据后清除状态
      window.history.replaceState({}, document.title);
    }
  }
  

• 原地跳转时清除之前的状态：跳转时传入空state并设置replaceUrl: true，覆盖当前历史记录：

  async refresh() {
    this.router.navigateByUrl('/form', {
      state: {}, // 空状态
      replaceUrl: true
    });
  }
  

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