在 GET 请求中使用 Activated Route 参数变量 returns null

Question

我有一个正在侦听 Observable 的组件，该 Observable returns 信息基于字符串中提供的名称。

我想通过在 GET 请求中传入 Activated Route 参数的变量来为 Observable 提供名称。问题是，当我在服务的 GET 请求中使用变量时，URL 没有检测到我的变量和请求 returns 'null'。

我怀疑我的问题出在我的组件中的 ngOnit 中。我的 getPlayer(playerCode) 中的 playerCode.. 我只是不确定为什么..

如果我的 playerCode 是一个字符串，并且我将其附加到请求中的 URL 中，这应该行不通吗？

在我的组件中：

ngOnInit() {

const playerCode = this.route.snapshot.paramMap.get('player');  

this.playerService.getPlayer(playerCode).pipe(
  switchMap( player => { 
   let playerData = player["data"][0];
   let anotherID = playerData.id;

   return this.playerService.getSeasonStats(anotherID);

 })) 

 .subscribe(id => this.player = id);


 }

我的服务在 URL:

中使用字符串变量

 getPlayer(player: string):Observable<Player[]> {

let getHeaders = new HttpHeaders({'Authorization':'API_Key', 'Accept': 'application/vnd.api+json'}); 

  return this.http.get<Player[]>(`https://api.pubg.com/shards/steam/players?filter[playerNames]=`+ player,  { observe:'body',   responseType: 'json', headers: getHeaders,  });    

  }

我的应用路由组件

 const routes: Routes = [

 { path: 'players', component: CareerComponent },
 { path: 'players/:player', component: CareerComponent },
 {  path: '**', redirectTo: 'players'  }

Answer 1

问题出在您的路由上。它将首先匹配第一条路线，因此您的动态变量将被忽略。将您的路由更改为：

const routes: Routes = [

 { path: 'players', pathMatch: 'full', component: CareerComponent },
 { path: 'players/:player', component: CareerComponent },
 {  path: '**', redirectTo: 'players'  }

这将确保当您的 url 为 players/0203 时，它将匹配第二条路线而不是第一条路线。

Answer 2

尝试使用

const routeparams = this.route.snapshot.queryParams

它将return一个包含所有参数和值的对象，你可以

那么你可以通过

获得玩家为你服务的价值

routeparams['player']

在 GET 请求中使用 Activated Route 参数变量 returns null

Using Activated Route param variable in GET request returns null

javascript

parameters

get

angular

angular-httpclient