Angular 5'te URL'den sorgu parametrelerini nasıl alabilirim?

Açısal 5.0.3 kullanıyorum, benim gibi sorgu parametreleri bir grup ile benim uygulama başlatmak istiyorum /app?param1=hallo&param2=123. Her ipucu verilen açısal 2'de url sorgu params almak nasıl? benim için çalışmıyor.

Sorgu parametrelerinin nasıl çalışacağına dair herhangi bir fikir var mı?

private getQueryParameter(key: string): string {
  const parameters = new URLSearchParams(window.location.search);
  return parameters.get(key);
}

Bu özel işlev parametrelerimi almama yardımcı oluyor, ancak yeni Açısal ortamda bunun doğru yol olduğunu düşünmüyorum.

[update:] Ana uygulamam benziyor

@Component({...})
export class AppComponent implements OnInit {

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // would like to get query parameters here...
    // this.route...
  }
}

Açısal 5'te sorgu parametrelerine abone olarak erişilir this.route.queryParams.

Misal: /app?param1=hallo&param2=123

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    console.log('Called Constructor');
    this.route.queryParams.subscribe(params => {
        this.param1 = params['param1'];
        this.param2 = params['param2'];
    });
}

oysa yol değişkenlerine this.route.snapshot.params

Misal: /param1/:param1/param2/:param2

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    this.param1 = this.route.snapshot.params.param1;
    this.param2 = this.route.snapshot.params.param2;
}

Bu benim için en temiz çözüm

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

export class MyComponent {
  constructor(
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    const firstParam: string = this.route.snapshot.queryParamMap.get('firstParamKey');
    const secondParam: string = this.route.snapshot.queryParamMap.get('secondParamKey');
  }
}

OP'nin Angular 5 çözümü istediğini biliyorum, ancak daha yeni (6+) Açısal sürümler için bu soruya rastlayan hepiniz için. ActivatedRoute.queryParams (diğer yanıtların çoğunun dayandığı) ile ilgili Dokümanlara atıfta bulunmak:

İki eski özellik hala mevcuttur. Bunlar cesareti bunların yerini alacak, daha az yetenekli ve kaldırılmış olabilir gelecekteki bir Açısal versiyonu.

params - Rotaya özgü gerekli ve isteğe bağlı parametreleri içeren bir Gözlemlenebilir. Bunun yerine paramMap kullanın.

queryParams - Tüm rotalar için kullanılabilir sorgu parametrelerini içeren bir Gözlemlenebilir. Bunun yerine queryParamMap kullanın.

Dokümanlar'a göre , sorgu parametrelerini almanın basit yolu şöyle görünecektir:

constructor(private route: ActivatedRoute) { }

ngOnInit() {
    this.param1 = this.route.snapshot.paramMap.get('param1');
    this.param2 = this.route.snapshot.paramMap.get('param2');
}

Daha gelişmiş yollar için (örneğin, gelişmiş bileşenlerin yeniden kullanımı) bu Dokümanlar bölümüne bakın.

DÜZENLE:

Aşağıdaki yorumlarda doğru şekilde belirtildiği gibi, bu cevap yanlıştır - en azından OP tarafından belirtilen durum için.

OP küresel sorgu parametrelerini almayı ister (/ app? Param1 = hallo & param2 = 123); bu durumda queryParamMap kullanmalısınız (tıpkı @ dapperdan1985 yanıtında olduğu gibi).

paramMap ise rotaya özgü parametrelerde kullanılır (örn. / app /: param1 /: param2, sonuç olarak / app / hallo / 123).

@JasonRoyle ve @ daka'ya işaret ettiği için teşekkürler.

HttpParams'ı da kullanabilirsiniz , örneğin:

  getParamValueQueryString( paramName ) {
    const url = window.location.href;
    let paramValue;
    if (url.includes('?')) {
      const httpParams = new HttpParams({ fromString: url.split('?')[1] });
      paramValue = httpParams.get(paramName);
    }
    return paramValue;
  }

import { ParamMap, Router, ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    console.log(this.route.snapshot.queryParamMap);
}

GÜNCELLEME

import { Router, RouterStateSnapshot } from '@angular/router';

export class LoginComponent {
    constructor(private router: Router) {
        const snapshot: RouterStateSnapshot = router.routerState.snapshot;
        console.log(snapshot);  // <-- hope it helps
    }
}

benim için çalışması:

constructor(private route: ActivatedRoute) {}

ngOnInit()
{
    this.route.queryParams.subscribe(map => map);
    this.route.snapshot.queryParams; 
}

daha fazla seçenek bak angular2 içinde url'den sorgu parametreleri nasıl alınır?

Sorgu ve Yol Parametreleri (Açısal 8)

Https://myapp.com/user/666/read?age=23 gibi url için kullanın

import { combineLatest } from 'rxjs';
// ...

combineLatest( [this.route.paramMap, this.route.queryParamMap] )
  .subscribe( ([pathParams, queryParams]) => {
    let userId = pathParams.get('userId');    // =666
    let age    = queryParams.get('age');      // =23
    // ...
  })

GÜNCELLEME

Kullandığınızda this.router.navigate([someUrl]);ve sorgu parametreleriniz someUrldizeye gömüldüğünde açısal bir URL kodlar ve böyle bir şey alırsanız https://myapp.com/user/666/read%3Fage%323 - ve yukarıdaki çözüm yanlış sonuç verir ( queryParams boş olacak ve yol parametreleri, yolun ucundaysa, son yol parametresine yapıştırılabilir). Bu durumda navigasyon biçimini değiştirmek Buna

this.router.navigateByUrl(someUrl);

Benzer bir çözüm ararken bu soruya rastladım, ancak tam uygulama düzeyinde yönlendirme veya daha fazla ithal modül gibi bir şeye ihtiyacım yoktu.

Aşağıdaki kod kullanımım için harika çalışıyor ve ek modül veya içe aktarma gerektirmiyor.

  GetParam(name){
    const results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if(!results){
      return 0;
    }
    return results[1] || 0;
  }

  PrintParams() {
    console.log('param1 = ' + this.GetParam('param1'));
    console.log('param2 = ' + this.GetParam('param2'));
  }

http://localhost:4200/?param1=hello&param2=123 çıktılar:

param1 = hello
param2 = 123

Açısal Yönlendirici , url'yi UrlTree'ye ayrıştıran parseUrl (url: string) yöntemini sağlar . UrlTree özelliklerinden biri queryParams. Böylece sth gibi yapabilirsiniz:

this.router.parseUrl(this.router.url).queryParams[key] || '';

Ne yazık ki, en temiz çözüm en genişletilebilir çözüm değildir. Angular'ın son sürümlerinde, diğer yanıtlarda, ActivatedRoute Injectible'ı kullanarak ve özellikle snapshot özelliğini kullanarak sorgu parametrelerini kolayca alabilmeniz önerilir:

this.route.snapshot.queryParamMap.get('param')

veya abone olma özelliği (sorgu dizesinin güncelleneceği durumlarda kullanılır, örneğin kullanıcı kimlikleri arasında gezinme):

this.route.queryParamMap.subscribe(params => console.log(params));

Size bu çözümlerin bir süredir çözülmemiş bir boşluk olduğunu söylemek için buradayım: https://github.com/angular/angular/issues/12157

Sonuç olarak, tek kurşun geçirmez çözüm iyi eski vanilya javascript kullanmaktır. Bu durumda, URL yönetimi için bir hizmet oluşturdum:

import { Injectable } from '@angular/core';
import { IUrl } from './iurl';

@Injectable()
export class UrlService {
    static parseQuery(url: string): IUrl {
        const query = url.slice(url.indexOf('?')+1).split('&').reduce( (acc,query) => {
            const parts = query.split('=');
            acc[parts[0]] = parts[1];
            return acc;
        }, {});

        return {
            a: query['a'],
            b: query['b'],
            c: query['c'],
            d: query['d'],
            e: query['e']
        }
    }
}

Boş bir rota nesneniz olduğunda, bunun nedeni esas olarak app.component.html dosyanızda bir yönlendirici-çıkış kullanmamanızdır.

Bu olmadan, boş olmayan subObjects, özellikle params & queryParams ile anlamlı bir rota nesnesi elde edemezsiniz.

Aramaya <router-outlet><router-outlet>başlamadan hemen önce eklemeyi deneyin . <app-main-component></app-main-component>

Bundan önce, uygulama bileşeni tarafından kullanılan Route sınıfını veren sorgu parametrenizin uygulama yönlendirmesinde hazır olduğunuzdan emin olun:

param: '/param/:dynamicParam', path: MyMainComponent

Tabii ki, param almak için son olarak, this.route.snapshot.params.dynamicParamdynamicParam'ın uygulama yönlendirme bileşeninizde kullanılan ad olduğu kişiyi kullanıyorum :)

Rotalarınıza dikkat edin. Bir "redirectTo" herhangi bir sorgu parametresini | bırakacaktır.

const appRoutes: Routes [
 {path: "one", component: PageOneComponent},
 {path: "two", component: PageTwoComponent},
 {path: "", redirectTo: "/one", pathMatch: full},
 {path: "**", redirectTo: "/two"}
]

Ana bileşenimi "/ main? Param1 = a & param2 = b gibi sorgu parametreleriyle çağırdım ve sorgu parametrelerimin yönlendirme yönlendirme etkinleşmeden önce ana bileşendeki" ngOnInit () "yöntemine ulaştığını varsayalım.

Ama bu yanlış. Yönlendirme daha önce gelir, sorgu parametrelerini kaldırır ve ana bileşende sorgu parametreleri olmadan ngOnInit () yöntemini çağırır.

Rotalarımın üçüncü satırını olarak değiştirdim

{path: "", component: PageOneComponent},

ve şimdi sorgu parametrelerime ngOnInit ana bileşenlerinde ve ayrıca PageOneComponent'te erişilebilir.

Bulunan: Ana bileşenler, ActivatedRoute'tan boş Params alır

Benim için çalıştı:

import {Component, OnDestroy, OnInit} from '@angular/core';
import { Router, ActivatedRoute, Params, RoutesRecognized } from '@angular/router';

@Component({
  selector: 'app-navigation-bar',
  templateUrl: './navigation-bar.component.html',
  styleUrls: ['./navigation-bar.component.scss']
})
export class NavigationBarComponent implements OnInit, OnDestroy {
  private sub: any;
  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {
    this.sub = this.router.events.subscribe(val => {
      if (val instanceof RoutesRecognized) {
        console.log(val.state.root.firstChild.params);
      }
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

}

Sadece aynı sorun üzerinde tökezledi ve burada cevapların çoğu sadece Açısal iç yönlendirme için çözüyor gibi görünüyor ve daha sonra bazıları istek parametreleri ile aynı olmayan rota parametreleri için.

Sanırım Lars'ın orijinal sorusuna benzer bir kullanım durumum var.

Benim için kullanım örneği referans takibi:

Açısal mycoolpage.comyönlendirme, karma yönlendirme ile, bu yüzden mycoolpage.comyönlendirir mycoolpage.com/#/. Ancak, yönlendirme için, böyle bir bağlantı mycoolpage.com?referrer=fooda kullanılabilir olmalıdır. Ne yazık ki, Angular doğrudan istek parametrelerini hemen keser mycoolpage.com/#/.

Boş bir bileşen + AuthGuard kullanarak ve maalesef benim için işe yaramıyor queryParamsya da queryParamMapyaptı her türlü 'hile' . Onlar her zaman boştu.

Benim hacky çözüm bu istek parametreleri ileindex.html tam URL alır küçük bir komut dosyasında işlemek oldu . Sonra dize manipülasyonu ile istek param değerini almak ve pencere nesnesinde ayarlayın. Ayrı bir hizmet daha sonra kimliği pencere nesnesinden almayı işler.

index.html komut dosyası

const paramIndex = window.location.href.indexOf('referrer=');
if (!window.myRef && paramIndex > 0) {
  let param = window.location.href.substring(paramIndex);
  param = param.split('&')[0];
  param = param.substr(param.indexOf('=')+1);
  window.myRef = param;
}

Hizmet

declare var window: any;

@Injectable()
export class ReferrerService {

  getReferrerId() {
    if (window.myRef) {
      return window.myRef;
    }
    return null;
  }
}

Basit Çözüm

 // in routing file
       {
            path: 'checkout/:cartId/:addressId',
            loadChildren: () => import('./pages/checkout/checkout.module').then(m => m.CheckoutPageModule)
          },

    // in Component file

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

                 constructor(
                      private _Router: ActivatedRoute
                  ) { }

                  ngOnInit() {
                    this.cartId = this._Router.snapshot.params.cartId;
                    this.addressId = this._Router.snapshot.params.addressId;
                    console.log(this.addressId, "addressId")
                    console.log(this.cartId, "cartId")
                  }

http: // localhost: 4200 / ürünler sipariş popüler =

Sipariş sorgusu parametresine şu şekilde erişebiliriz:

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

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

Ayrıca bir paramMap nesnesiyle gözlemlenebilir döndüren queryParamMap da vardır.

Aşağıdaki rota URL'si verildiğinde:

http: // localhost: 4200 / ürünler sipariş yeni = popüler & filtre =

this.route.queryParamMap.subscribe(params => {
  this.orderObj = {...params.keys, ...params};
});

Kaynak - https://alligator.io/angular/query-parameters/

Bence Açısal 8:

ActivatedRoute.paramsile değiştirildi ActivatedRoute.paramMap ActivatedRoute.queryParamsile değiştirildi ActivatedRoute.queryParamMap

/*
Example below url with two param (type and name) 
URL : http://localhost:4200/updatePolicy?type=Medicare%20Insurance&name=FutrueInsurance
*/ 
  constructor(private route: ActivatedRoute) {
    //Read url query parameter `enter code here`
  this.route.queryParams.subscribe(params => {
    this.name= params['type'];
    this.type= params['name'];
    alert(this.type);
    alert(this.name);

 });

  }

Açısal yönlendirici kullanmıyorsanız, querystring'i deneyin . Yükle

npm install --save querystring

projenize. Bileşeninizde böyle bir şey yapın

import * as qs from 'querystring';
...
ngOnInit() {
   const params = qs.parse(window.location.search.substring(1));
   ...
}

Bu substring(1)gereklidir, çünkü böyle bir şeyiniz varsa '/mypage?foo=bar', anahtar adı?foo