时间戳

首页 > 解决方案 > 带有GET参数的Angular 7路由器路径

angular - 带有GET参数的Angular 7路由器路径

问题描述

我一直在寻找几个小时，但找不到我的问题的有效解决方案......

我的 Angular 应用程序将用户重定向到通过 GET 参数返回 jwt 的 oAuth2 API。我发现了如何使用 Angular 读取 GET 参数，但我的问题是另一回事：

{path: 'authenticate', component: AuthenticationComponent}

这是我为我的 AuthenticationComponent 设置的路由。它按预期工作，没有任何附加参数，但使用单个 get 参数（'/authenticate?jwt=123' 而不是 '/authenticate'）它不再工作，我的 '**' 路由被激活。

一种解决方法是另一个站点（不是用 angular 编写的），它将用户重定向到 angular 页面并将 GET 参数转换为 URL 参数 ('/authenticate?jwt=123' => '/authenticate/123') 并更改我的路由路径到 'authenticate/:jwt' 但我想用我的角度应用程序来做。

请帮我

标签： angulartypescripturlangular2-routing

解决方案

像这样设置路由器

{path: 'authenticate/:jwt', component: AuthenticationComponent}

并获取组件中的 jwt 值

// top component
import { Router, ActivatedRoute } from '@angular/router';
// constructor arg
constructor(private route: ActivatedRoute) {}
// user method or ngOnInit inside
this.route.params['value'].jwt

模块中的下一个导入路由模块

// top module
import { RouterModule } from '@angular/router';
// import object
imports: [RouterModule.forRoot([])]

这是工作

推荐阅读