Url 查询字符串，平均堆栈

Question

我有一个平均堆栈的应用程序，我怎样才能让我的 url 变成这样？

skill/1?角色=123&角色=456

服务

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders,HttpParams } from '@angular/common/http';
import { Observable } from "rxjs";
import { GLOBAL } from '../global.service';

 @Injectable({
   providedIn: 'root'
})
export class ProfesionalService {
  public url: string;

constructor(private _http: HttpClient){
    this.url = GLOBAL.url;
  }
getProfe(token, role):Observable<any>{

   let headers = new HttpHeaders().set('Content-Type','application/json')
               .set('Authorization',token);

  return this._http.get(this.url+'ads/professsional/1?role='  + role,  
{headers: headers});
 }
 }

组件

getPro(){
this._route.params.forEach((params: Params) => {
  let role = params['role'];

this._professionalservice.getProfe(this.token,role).subscribe(
    response => {console.log(response.professionals)
        if(!response.professionals){
            this._router.navigate(['/']);
        }else{
           this.professionals=response.professionals;

        }

    },
    error => {
        var errorMessage = <any>error;
        console.log(errorMessage);
        if(errorMessage != null){
            this.status = 'error';
        }
    }
);}  
);
}

路由

const appRoutes: Routes = [
{path: 'skill/:role', component: SkillComponent},
];

export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

仅对url

有效

skill/1?角色=123

有人可以帮助我或告诉我在哪里可以找到信息吗？

Answer 1

看看下面的代码是否对您有帮助。我的理解是，您想为后端 url 多次动态添加相同的 queryParam。

而且我假设您将 roles 参数作为包含 [123,456,789]

的数组传递

getProfe(token, roles : Array<number>):Observable<any>{
   let headers = new HttpHeaders().set('Content-Type','application/json')
               .set('Authorization',token);

    let url = this.url+'ads/professsional/1';

    if(roles.length > 0) {
        url += '?';  // concat '?'
        roles.forEach((r) => 
          {
              url += 'role=' + r + '&';         // add multiple params like role='123'
          }
        )
        url.splice(url.length-1, 1); // remove trailing &
    }   

  return this._http.get(url, {headers: headers});
}

Url 查询字符串，平均堆栈

Url query string , mean stack

parameters

stack

mean

query-parameters

angular5