Angular 如何在不改变 URL 的情况下使用参数进行路由

Question

TL;DR;我想路由到一个没有 URL 指示基础数据的参数的页面。

我有两个组件。组分 A 和 B。我想要实现的是通往 B 的路线，但我需要来自 A 的一些参数。我知道我可以通过像这样 [/B:parameter] 设置路由来路由到 B。我的问题是它将 URL 从 localhost:4200/b 更改为类似 localhost:4200/b=? 的参数。我想对用户隐藏参数：

-一个：与他们无关
- 二：可能包含敏感的业务逻辑和/或数据。

目前我只是将一个常量设置为适当的状态并在B的onInit上读取它但是感觉很不优雅，应该有更好，更优雅的方式来做事。坦率地说，它运作良好，但我不喜欢它。我应该如何处理它？

Answer 1

简答：导航时在路线中传递数据。

说明：您可以在 Route 文档中找到数据参数 (https://angular.io/api/router/Route)

示例：在路由模块中：

path: 'auth', component: AuthComponent, data: { type: 'admin' }

在 AuthComponent 中，您可以使用 ActivateRoute 获取类型数据

  constructor(
    private activatedRoute: ActivatedRoute
  ) {
    this.type = this.activatedRoute.snapshot.data.type;
  }

所以你会问：如何在路由时动态传递数据？请检查一下：

Answer 2

您可以更改浏览器 url 而不会触发任何导航，例如：

window.history.replaceState(undefined, '', '#newdata');

参见：https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState

但要小心！

Angular 如何在不改变 URL 的情况下使用参数进行路由

Angular how to route with parameters without changing the URL

javascript

routes

typescript

angular