Извлечь параметры запроса URL из запроса URL в Angular 8

Question

Можно ли как-нибудь получить параметры строки запроса GET URL из любого определенного URL-адреса в моей Angular службе?

Например, предположим, у меня есть URL = "http:localhost/?id=123&name=abc"; или URL = "http://www.myexamplewebsite.com?id=123&name=abc";

// in my service.ts
public myFunction(): Observale<any>
{
 let getVariable= this.http.get(URL);
 return getVariable.pipe(map(response => <Object>response), catchError(error => this.handleError(error)));
}

Так что либо в моем component.ts , либо service.ts есть ли Как я мог извлечь этот идентификатор и имя? Я новичок с этим topi c.

Примечание. Я не запускаю этот URL в своем маршруте. Так что this.route.snap.params функция не помогла.

Answer 1

Класс ActivatedRoute имеет свойство queryParams , которое возвращает наблюдаемое параметров запроса, доступных в текущем URL .

export class ProductComponent implements OnInit {
  order: string;
  constructor(private route: ActivatedRoute) { }

   ngOnInit() {
      this.route.queryParams
        .filter(params => params.order)
        .subscribe(params => {
         console.log(params); // {order: "popular"}

         this.order = params.order;
         console.log(this.order); // popular
      });
   }
}

Нажмите здесь, чтобы прочитать всю статью, это легко и просто

Answer 2

Попробуйте использовать Angular HttpParams . Импортируйте это: import { HttpClient,HttpParams } from '@angular/common/http'; и используйте get(paramName) или getAll() в качестве строки [].

Вот еще один пример того, как вы можете получить параметры: https://www.tektutorialshub.com/angular/angular-pass-url-parameters-query-strings/

Answer 3

в вашем компоненте работает следующим образом.

импортируйте его.

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

, затем в конструкторе

private route: ActivatedRoute,

и затем вы можете получить параметр следующим образом.

this.route.queryParams.subscribe(data => {
    console.log(data)
});

рабочая демоверсия

попробуйте url и проверьте консоль. вы получите параметры запроса.

дайте мне знать, если у вас все еще есть проблема.

вы также можете проверить по этому URL - https://angular-routing-query-params.stackblitz.io/?abc=test&xyz=test2

вывод будет таким:

Answer 4

Вы можете получить параметры, введя Activatedroute в конструкторе компонента:

constructor(activatedRoute: ActivatedRoute) {
    let id = activatedRoute.snapshot.queryParams['id'];
    let name = activatedRoute.snapshot.queryParams['name'];
}