Como obter parâmetros de consulta de url no Angular 2?

Eu uso angular2.0.0-beta.7. Quando um componente é carregado em um caminho como /path?query=value1ele é redirecionado /path. Por que os parâmetros GET foram removidos? Como posso preservar os parâmetros?

Eu tenho um erro nos roteadores. Se eu tiver uma rota principal como

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

e minha rota filho como

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

então não consigo obter parâmetros no TodoListComponent. Eu consigo

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

mas eu quero o clássico

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

Ao injetar uma instância de ActivatedRouteum, é possível assinar uma variedade de observáveis, incluindo um queryParamse um paramsobservável:

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);
      });
  }

}

UMA NOTA RELATIVA À INSCRIÇÃO

@Reto e @ codef0rmer apontaram, com razão, que, de acordo com os documentos oficiais, um método unsubscribe()dentro dos componentes onDestroy()é desnecessário neste caso. Isso foi removido do meu exemplo de código. (veja a caixa de alerta azul neste tutorial)

Quando um URL como este http://stackoverflow.com?param1=value

Você pode obter o param1 pelo código a seguir:

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"];
    }
}

Embora a pergunta especifique a versão beta 7 , ela também aparece como o principal resultado de pesquisa no Google para frases comuns, como parâmetros de consulta angular 2 . Por esse motivo, aqui está uma resposta para o roteador mais recente (atualmente em alpha.7 ).

A maneira como os parâmetros são lidos mudou dramaticamente. Primeiro, você precisa injetar a dependência chamada Routernos parâmetros do construtor, como:

constructor(private router: Router) { }

e depois disso, podemos assinar os parâmetros de consulta em nosso ngOnInitmétodo (o construtor também está bom, mas ngOnInitdeve ser usado para testabilidade) como

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

Neste exemplo, lemos o parâmetro de consulta id da URL como example.com?id=41.

Ainda há poucas coisas a serem observadas:

1. Acessar a propriedade paramslike params['id']sempre retorna uma string , e isso pode ser convertido em número prefixando-o com +.
2. O motivo pelo qual os parâmetros de consulta são buscados com observável é que ele permite reutilizar a mesma instância do componente em vez de carregar uma nova. Cada vez que o parâmetro de consulta é alterado, ele causa um novo evento no qual assinamos e, portanto, podemos reagir às alterações de acordo.

Gostei muito da resposta do @ StevePaul, mas podemos fazer o mesmo sem uma chamada externa de inscrição / cancelamento de inscrição.

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
}

Para enviar parâmetros de consulta

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

Para receber parâmetros de consulta

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

Fonte oficial

Olá, você pode usar URLSearchParams, pode ler mais sobre isso aqui .

importar:

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

e função:

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

Aviso : não é suportado por todas as plataformas e parece estar no estado "EXPERIMENTAL" por documentos angulares

Primeiro, o que eu descobri trabalhando com o Angular2 é que o URL com uma string de consulta seria /path;query=value1

Para acessá-lo em um componente que você usa, Então é isso, mas agora segue um bloco de código:

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

Quanto ao motivo pelo qual ele seria removido quando você carregasse o componente, esse não é o comportamento padrão. Fiz uma verificação específica em um projeto de teste limpo e não fui redirecionado ou alterado. É uma rota padrão ou algo mais especial sobre o roteamento?

Leia sobre roteamento com seqüências de caracteres e parâmetros de consulta no Tutorial do Angular2 em https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

Você pode obter os parâmetros de consulta quando transmitidos na URL usando o ActivatedRoute, conforme indicado abaixo: -

URL: - http: /domain.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']));
  }

}

Obter parâmetros de URL como um objeto.

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

Se você deseja obter o parâmetro de consulta apenas uma vez, a melhor maneira é usar o método take , para que você não precise se preocupar com a desinscrição. Aqui está o trecho simples: -

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

Nota: Remova a captura (1) se desejar usar os valores dos parâmetros no futuro.

agora é:

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

Espero que ajude alguém.

A pergunta acima afirma que o valor do parâmetro de consulta é necessário após o redirecionamento da página e podemos assumir que o valor do instantâneo (a alternativa não observável) seria suficiente.

Ninguém aqui mencionou snapshot.paramMap.get a partir da documentação oficial .

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

Portanto, antes de enviá-lo, adicione isso no componente de envio / redirecionamento:

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

em seguida, redirecione como (documentado aqui ):

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

ou simplesmente:

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

Verifique se você adicionou isso no seu módulo de roteamento, conforme documentado aqui :

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

E, finalmente, no seu componente que precisa usar o parâmetro de consulta

• adicione importações (documentadas aqui ):

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

• injetar ActivatedRoute

(a documentação também importa switchMap e também injeta Router e HeroService - mas são necessários apenas para alternativa observável - NÃO são necessários quando você usa a alternativa de instantâneo, como no nosso caso):

    constructor(
      private route: ActivatedRoute
    ) {}

• e obtenha o valor necessário (documentado aqui ):

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

OBSERVAÇÃO: SE VOCÊ ADICIONAR O MÓDULO DE ROTAÇÃO A UM MÓDULO DE RECURSO (MOSTRADO NA DOCUMENTAÇÃO) VERIFIQUE QUE EM APP.MODULE.ts ESTE MÓDULO DE ROTAÇÃO SEJA ANTES DO AppRoutingModule (ou outro arquivo com rotas de aplicativos no nível raiz) EM IMPORTAÇÕES: []. OUTRAS ROTAS DE RECURSOS NÃO SERÃO ENCONTRADAS (COMO VIRAM APÓS {path: '**', redirectTo: '/ not-found'} e você verá apenas a mensagem não encontrada).

Você só precisa injetar ActivatedRoute no construtor e acessar os parâmetros ou queryParams sobre ele

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

Em alguns casos, ele não fornece nada no NgOnInit ... talvez por causa da chamada init antes da inicialização dos parâmetros, nesse caso, você pode conseguir isso pedindo ao observável que aguarde algum tempo pela função debounceTime (1000)

por exemplo =>

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

debounceTime () Emite um valor da fonte observável somente após um período de tempo específico passado sem outra emissão de origem

Você não pode obter um parâmetro do RouterState se ele não estiver definido na rota; portanto, no seu exemplo, você deve analisar a string de consulta ...

Aqui está o código que eu usei:

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);

Consulta e caminho (Angular 8)

Se você tiver um URL como https://myapp.com/owner/123/show?height=23 , use

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

ATUALIZAR

Caso você use this.router.navigate([yourUrl]);e seus parâmetros de consulta sejam incorporados em yourUrlstring, o angular codifica um URL e você obtém algo como este https://myapp.com/owner/123/show%3Fheight%323 - e a solução acima dará um resultado errado ( queryParams estará vazio e os parâmetros de consulta podem ser colados no último parâmetro do caminho, se estiver no final do caminho). Nesse caso, altere o modo de navegação para este

this.router.navigateByUrl(yourUrl);