¿Cómo pasar parámetros de consulta con un routerLink?

La tarea es pasar los parámetros de consulta con un enlace de enrutador, para eso podemos usar el concepto de enlace de propiedad para alcanzar el objetivo. Usando el enlace de propiedad, podemos enlazar la propiedad queryParams y podemos proporcionar los detalles requeridos en el objeto.

¿Qué es la vinculación de propiedad?

Es un concepto en el que usamos la notación de corchetes para vincular datos a las propiedades del Modelo de objetos del documento (DOM) de los elementos del lenguaje de marcado de hipertexto (HTML).

Sintaxis:

<a [routerLink]="[/path]" [queryParams]="{property:value}">
   State Details 
</a>
 

Un ejemplo de enlace de propiedad:

import { Component, OnInit } from '@angular/core'
  
@Component({
  
    selector: 'app-property',
    template:
        // Property Binding 
        `<p [textContent]="title"></p>`
})
  
export class AppComponent implements OnInit {
  
    constructor() { }
    ngOnInit() { }
  
    title = 'Property Binding example in GeeksforGeeks';
  
}

Producción:

Ilustración del código anterior

Acercarse:

• Primero, configure las rutas en app.module.ts
• Implemente parámetros de consulta con los valores requeridos en el archivo HTML.
• Luego, en el archivo .ts, en ngOnit intente acceder a los parámetros de consulta utilizando la ruta activada importándola desde ‘angular@router’
• Una vez que pueda acceder a ellos, intente representarlos utilizando la sintaxis de interpolación de strings o la sintaxis de vinculación de propiedades en un archivo HTML.

A continuación se muestra la implementación de los pasos anteriores:

aplicación.módulo.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from 
            '@angular/platform-browser';
  
// Importing Routes
import { RouterModule, Routes } 
        from '@angular/router';
  
import { AppComponent } from 
            './app.component';
  
import { StateComponent } from 
        './state/state.component';
  
// Configuring Routes
const routes: Routes = [{ 
    path: 'punjab', 
    component: StateComponent 
},];
  
@NgModule({
    imports: [BrowserModule, R
        outerModule.forRoot(routes)],
          
    declarations: [AppComponent, 
        StateComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

aplicación.componente.html:

<a [routerLink]="['/punjab']" [queryParams]=
    "{capital:'mohali',language:'punjabi'}">
    State Details
</a>
<router-outlet></router-outlet>

Después de hacer clic en la etiqueta de anclaje, la URL se mostrará de la siguiente manera:

También podemos acceder a los parámetros de consulta mediante la ruta activada.

De esta forma, podemos pasar parámetros de consulta a través de routerLink.

Obtención de parámetros de consulta:

estado.componente.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
  
@Component({
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
})
export class StateComponent implements OnInit {
  
  capital: string;
  language:string;
  
  constructor(private route: ActivatedRoute) { }
  
  ngOnInit() {
    this.route.queryParams.subscribe(
      params => {
        this.capital =  params['capital'];
        this.language=params['language'];
      }
    )
  }
  
}

estado.componente.html:

State Details are : 
  
<p>Capital  : {{capital}} </p>
  
<p>Language : {{language}} </p>

Producción:

• Antes de hacer clic en el botón:

  

• Después de hacer clic en el botón: por lo tanto, se pueden ver los parámetros de consulta pasados