example - Angular2 Routerlink: agrega parámetros de consulta

routerlink angular 6

Question

¿Cómo puedo agregar parámetros de consulta a routerLink ?

@RouteConfig {
{path: ''/search'', name: ''Search'', component: SearchCmp}
}

Digamos que quiero encaminarme a /search?q=asdf ,

<a [routerLink]= " [ ''/Search'' , {q= ''asdf''}] ">Link 1</a>

esto se resuelve en /search .

¿Hay alguna manera de agregar parámetros de consulta sin usar:

this.router.navigate( [''Search'', { q: ''asdf''}]);

o

<a href="/search?a=asdf"> Link 2 </a>

?

Answer 1

OP (Póster original) preguntó cómo agregar parámetros de consulta a través del enlace del enrutador, no los parámetros del enrutador como respondió @SaUrAbH MaUrYa.

Para agregar parámetros de consulta, debe usar el [queryParams] :

<a [routerLink]="[''/users'']" [queryParams]="{ page: 1 }">next page</a>

Answer 2

Si necesita algo como /search?q=asdf , simplemente puede usar:

@RouteConfig {
{path: ''/search'', name: ''Search'', component: SearchCmp}
}
//And to generate router Links use:
<a [routerLink]="[''/Search'']" [queryParams]="{q:''asdf''}"></a>

Esto generará la etiqueta href como <a href="/search" pero al hacer clic en la etiqueta de anclaje lo llevará a url /search?q=asdf . [queryParams] le permitirá agregar los params de consulta con "?", de lo contrario se agregarán con ";". Puede obtener este parámetro en su SearchCmp usando:

constructor(private _routeParams: RouteParams) {
var queryParam = this._routeParams.get(''q'');
}