Angular 11中如何在navigateByUrl()中传递并使用额外参数？

一、在目标组件的ngOnInit中访问state值 #

state 属于浏览器历史记录的附加数据，无法通过ActivatedRoute直接获取，可以通过以下两种标准方式获取：

方式1：直接访问浏览器的history.state #

这是最可靠的方式，不受组件复用或导航阶段的影响：

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

@Component({
  selector: 'app-target',
  templateUrl: './target.component.html'
})
export class TargetComponent implements OnInit {
  ngOnInit(): void {
    const fromPage = history.state.from;
    console.log('来自页面：', fromPage); // 输出 'details-page'
  }
}

方式2：通过Router的getCurrentNavigation() #

仅在导航刚完成的阶段可用，如果组件是复用状态（比如路由复用策略开启），该方法可能返回null：

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

@Component({
  selector: 'app-target',
  templateUrl: './target.component.html'
})
export class TargetComponent implements OnInit {
  constructor(private router: Router) { }

  ngOnInit(): void {
    const navigation = this.router.getCurrentNavigation();
    if (navigation?.extras.state) {
      const fromPage = navigation.extras.state['from'];
      console.log('来自页面：', fromPage);
    }
  }
}

二、使用navigateByUrl传递state的正确方式 #

你当前的写法本身符合Angular规范，需要注意几个关键点：

正确代码示例 #

import { Router } from '@angular/router';

export class SourceComponent {
  constructor(private _router: Router) { }

  goToTargetPage() {
    const baseUrl = '/target-path';
    const previousFilter = 'status=active&page=1';
    // 拼接URL参数 + 传递state数据
    this._router.navigateByUrl(`${baseUrl}?${previousFilter}`, {
      state: { from: 'details-page' }
    });
  }
}

注意事项 #

• state 中的数据仅存在于浏览器历史栈中，页面刷新后会丢失，不要用来传递需要持久化的关键数据
• 如果需要刷新后仍保留数据，建议将数据编码到URL参数中（如你已使用的previousFilter），或使用localStorage/sessionStorage存储
• navigateByUrl 是基于绝对URL跳转，确保baseUrl是完整的路由路径（以/开头）

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