Angular 2 url sorgu params almak nasıl?

Açısal 2.0.0-beta.7 kullanıyorum. Bir bileşen /path?query=value1, yönlendirildiği gibi bir yola yüklendiğinde /path. GET parametreleri neden kaldırıldı? Parametreleri nasıl koruyabilirim?

Yönlendiricilerde bir hata var. Gibi bir ana rotam varsa

@RouteConfig([
  {
      path: '/todos/...',
      name: 'TodoMain',
      component: TodoMainComponent
  }
])

ve çocuğumun rotası şöyle

@RouteConfig([
  { path: '/', component: TodoListComponent, name: 'TodoList', useAsDefault:true },
  { path: '/:id', component: TodoDetailComponent, name:'TodoDetail' }
])

sonra TodoListComponent params alamıyorum. Alabilirim

params("/my/path;param1=value1;param2=value2") 

ama klasiği istiyorum

query params("/my/path?param1=value1&param2=value2")

ActivatedRouteBirinin bir örneğini enjekte etmek , a queryParamsve bir paramsgözlemlenebilir dahil olmak üzere çeşitli gözlenebilirlere abone olabilir :

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

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

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    // Note: Below 'queryParams' can be replaced with 'params' depending on your requirements
    this.activatedRoute.queryParams.subscribe(params => {
        const userId = params['userId'];
        console.log(userId);
      });
  }

}

ABONE OLMAYAN BİR NOT

@Reto ve @ codef0rmer, resmi belgelere göre bu örnekte unsubscribe()bileşenlerin içinde bir onDestroy()yöntemin gerekli olmadığını oldukça haklı olarak belirtmişlerdir . Bu kod örneğimden kaldırıldı. ( bu eğiticideki mavi uyarı kutusuna bakın )

Böyle bir URL ne zaman http://stackoverflow.com?param1=value

Aşağıdaki kod ile param1 alabilirsiniz:

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

@Component({
    selector: '',
    templateUrl: './abc.html',
    styleUrls: ['./abc.less']
})
export class AbcComponent implements OnInit {
    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        // get param
        let param1 = this.route.snapshot.queryParams["param1"];
    }
}

Soru beta 7 sürümünü belirtmesine rağmen , bu soru açısal 2 sorgu parametreleri gibi yaygın ifadeler için Google'da en iyi arama sonucu olarak karşımıza çıkmaktadır . Bu nedenle en yeni yönlendirici (şu anda alpha.7'de ) için bir cevap .

Parametrelerin okuma şekli önemli ölçüde değişti. Öncelikle Routeryapıcı parametrelerinizde çağrılan bağımlılığı enjekte etmeniz gerekir :

constructor(private router: Router) { }

ve bundan sonra ngOnInitmetodumuzdaki sorgu parametreleri için abone olabiliriz (yapıcı da iyidir, ancak ngOnInittest edilebilirlik için kullanılmalıdır)

this.router
  .routerState
  .queryParams
  .subscribe(params => {
    this.selectedId = +params['id'];
  });

Bu örnekte URL gibi sorgu parametresi kimliğini okuyoruz example.com?id=41.

Dikkat edilmesi gereken birkaç şey var:

1. paramsLike özelliğine erişmek params['id']her zaman bir dize döndürür ve bu, önüne önek eklenerek sayıya dönüştürülebilir +.
2. Sorgu parametrelerinin gözlemlenebilir şekilde getirilmesinin nedeni, yeni bir bileşen yüklemek yerine aynı bileşen örneğinin yeniden kullanılmasına izin vermesidir. Her sorgu parametresi değiştiğinde, abone olduğumuz yeni bir olaya neden olur ve bu nedenle değişikliklere buna göre tepki verebiliriz.

@ StevePaul'un cevabını gerçekten beğendim, ancak aynı şeyi harici abone / abonelikten çıkma olmadan da yapabiliriz.

import { ActivatedRoute } from '@angular/router';
constructor(private activatedRoute: ActivatedRoute) {
    let params: any = this.activatedRoute.snapshot.params;
    console.log(params.id);
    // or shortcut Type Casting
    // (<any> this.activatedRoute.snapshot.params).id
}

Sorgu parametreleri göndermek için

import { Router } from '@angular/router';
this.router.navigate([ '/your-route' ], { queryParams: { key: va1, keyN: valN } });

Sorgu parametrelerini almak için

import { ActivatedRoute } from '@angular/router';
this.activatedRoute.queryParams.subscribe(params => {
    let value_1 = params['key'];
    let value_N = params['keyN'];
});

Resmi kaynak

Merhaba URLSearchParams'ı kullanabilirsiniz, burada daha fazla bilgi edinebilirsiniz .

ithalat:

import {URLSearchParams} from "@angular/http";

ve fonksiyon:

getParam(){
  let params = new URLSearchParams(window.location.search);
  let someParam = params.get('someParam');
  return someParam;
}

Uyarı : Tüm platformlar tarafından desteklenmemektedir ve açısal dokümanlar tarafından "DENEYSEL" durumda görünmektedir

İlk uzakta, ne Angular2 ile çalışan bulduk bir sorgu dizesi ile url olur /path;query=value1

Bu bileşene erişmek için kullandığınız bileşen Budur, ancak şimdi bir kod bloğunu izler:

    constructor(params: RouteParams){
    var val = params.get("query");
    }

Bileşeni yüklediğinizde neden kaldırılacağı konusunda, bu varsayılan davranış değildir. Temiz bir test projesinde özel olarak kontrol ettim ve yönlendirmedim veya değiştirmedim. Varsayılan bir rota mı yoksa rota hakkında özel bir şey mi?

Https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters adresindeki Angular2 Öğreticisi'nde sorgu dizeleri ve parametrelerle yönlendirme hakkında bilgi edinin

Aşağıda belirtildiği gibi ActivatedRoute'u kullanarak URL'ye iletildiğinde sorgu parametrelerini alabilirsiniz: -

url: - http: /etkialanı.com? test = abc

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

@Component({
  selector: 'my-home'
})
export class HomeComponent {

  constructor(private sharedServices : SharedService,private route: ActivatedRoute) { 
    route.queryParams.subscribe(
      data => console.log('queryParams', data['test']));
  }

}

URL parametresini nesne olarak alın.

import { Router } from '@angular/router';
constructor(private router: Router) {
    console.log(router.parseUrl(router.url));
}

Sorgu parametresini yalnızca bir kez almak istiyorsanız, aboneliği iptal etme konusunda endişelenmenize gerek kalmadan en iyi yol take yöntemini kullanmaktır . İşte basit snippet: -

constructor(private route: ActivatedRoute) {
  route.snapshot.queryParamMap.take(1).subscribe(params => {
     let category = params.get('category')
     console.log(category);
  })
}

Not: İleride parametre değerlerini kullanmak istiyorsanız take (1) 'i kaldırın .

şimdi:

this.activatedRoute.queryParams.subscribe((params: Params) => {
  console.log(params);
});

Umarım başka birine yardımcı olur.

Yukarıdaki soru, sayfa yeniden yönlendirildikten sonra sorgu parametresi değerinin gerekli olduğunu belirtir ve anlık görüntü değerinin (gözlemlenemez alternatif) yeterli olacağını varsayabiliriz.

Burada kimse resmi belgelerden snapshot.paramMap.get hakkında bahsetmedi .

this.route.snapshot.paramMap.get('id')

Bu yüzden göndermeden önce bunu gönderme / yeniden yönlendirme bileşenine ekleyin:

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

daha sonra yeniden yönlendirin ( burada belgelenmiştir ):

this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);

ya da sadece:

this.router.navigate(['/heroes', heroId ]);

Bunu, burada belgelendiği gibi yönlendirme modülünüze eklediğinizden emin olun :

 { path: 'hero/:id', component: HeroDetailComponent }

Ve son olarak, bileşeninizde sorgu parametresini kullanması gereken

• ithalat ekleyin ( burada belgelenmiştir ):

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

• ActivatedRoute enjekte edin

(belgeler switchMap'i de içe aktarır ve ayrıca Router ve HeroService'i enjekte eder - ancak bunlar yalnızca gözlemlenebilir alternatif için gereklidir - bizim durumumuzda olduğu gibi anlık görüntü alternatifini kullandığınızda gerekli DEĞİLDİR):

    constructor(
      private route: ActivatedRoute
    ) {}

• ve ihtiyacınız olan değeri elde edin ( burada belgelenmiştir ):

  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
  }

NOT: BİR ÖZELLİK MODÜLÜNE (DOKÜMANTASYONDA GÖSTERİLDİĞİ GİBİ) YÖNLENDİRME MODÜLÜ EKLerseniz, UYGULAMA MODUNUN İTHALAT ÖNCE GELDİĞİNDEN EMİN OLUN: []. Aksi takdirde ÖZELLİK ROTALARI BULUNMAYACAKTIR ({path: '**' SONRASI GELECEKTİR, yönlendirme: '/ bulunamadı') ve yalnızca bulunamadı iletisini görürsünüz).

Sadece yapıcıya ActivatedRoute enjekte etmeniz ve sonra sadece params veya queryParams'a erişmeniz yeterlidir.

constructor(private route:ActivatedRoute){}
ngOnInit(){
        this.route.queryParams.subscribe(params=>{
        let username=params['username'];
      });
 }

Bazı durumlarda NgOnInit'te bir şey vermez ... belki de bu durumda paramların başlatılmasından önce init çağrısı nedeniyle debounceTime (1000) tarafından bir süre beklemesini gözlemleyerek bunu başarabilirsiniz.

örneğin =>

 constructor(private route:ActivatedRoute){}
    ngOnInit(){
            this.route.queryParams.debounceTime(100).subscribe(params=>{
            let username=params['username'];
          });
     }

debounceTime () Yalnızca belirli bir zaman aralığı başka bir kaynak emisyonu olmadan geçtikten sonra gözlemlenebilir bir değer üretir

RouterState'ten rotada tanımlanmamışsa bir parametre alamazsınız, bu nedenle örneğin, sorgu dizesini ayrıştırmanız gerekir ...

İşte kullandığım kod:

let re = /[?&]([^=#&]+)=([^&#]*)/g;
let match;
let isMatch = true;
let matches = [];
while (isMatch) {
    match = re.exec(window.location.href);
    if (match !== null) {
        matches[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
        if (match.index === re.lastIndex) {
            re.lastIndex++;
        }
    }
    else {
        isMatch = false;
    }
}
console.log(matches);

Sorgu ve Yol (Açısal 8)

Https://myapp.com/owner/123/show?height=23 gibi bir URL'niz varsa kullanın

combineLatest( [this.route.paramMap, this.route.queryParamMap] )
  .subscribe( ([pathParams, queryParams]) => {
    let ownerId = pathParams.get('ownerId');    // =123
    let height  = queryParams.get('height');    // =height
    // ...
  })

GÜNCELLEME

Kullandığınız this.router.navigate([yourUrl]);ve sorgu parametrelerinizin yourUrldizeye gömülü olması durumunda açısal bir URL kodlar ve böyle bir şey alırsanız https://myapp.com/owner/123/show%3Fheight%323 - ve yukarıdaki çözüm yanlış sonuç verecektir ( queryParams boş olacak ve sorgu uçları yolun ucundaysa son yol parametresine yapıştırılabilir). Bu durumda navigasyon biçimini değiştirmek Buna

this.router.navigateByUrl(yourUrl);