Búsqueda de sitios web

angular - Establecer la ruta con parámetros de consulta sin navegar a la ruta, directamente en el módulo de enrutamiento

Habrá un enlace en el correo electrónico; cuando se haga clic en ese enlace, quiero abrir el componente Lista.

la URL de ese enlace será como:

http://localhost:4200/list?Key=SdmfbjaBJHKbbjbv47g+ffh/fbf

Clave=SdmfbjaBJHKbbjbv47g+ffh/fbf

en este enlace puede haber cualquier tipo de valor en Key, solo necesito obtener ese valor tal como es al abrir el componente de lista que tiene un formulario, luego puedo enviar el valor del formulario y la key.

quiero establecer la ruta en el array de rutas en el módulo de enrutamiento, pero eso solo funciona para:

http://localhost:4200/list/SdmfbjaBJHKbbjbv47g+ffh/fbf

{path:'list:key', component:ListComponent},

estaba intentando:

http://localhost:4200/list?Key=SdmfbjaBJHKbbjbv47g+ffh/fbf

{path:'list?Key=:key', component:ListComponent},

Respuesta #1

No se pueden especificar directamente los parámetros de consulta en la ruta. Los parámetros de consulta se utilizan para pasar información adicional a una ruta, pero no son parte de la ruta en sí.

Modifica la configuración de tu ruta para eliminar el parámetro de consulta de la ruta

{ path: 'list', component: ListComponent }

En tu ListComponent, importa los módulos necesarios

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

export class ListComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      const key = params['Key'];
      // Use the 'key' value as needed in your component
    });
  }
}

Cuando se hace clic en el enlace, Angular navegará al ListComponent, y se llamará al método ngOnInit. Dentro de ese método, se suscribe al observable queryParams, lo que te permite extraer el valor de Key de la URL

Espero que sea útil..

Respuesta #2

No necesitas declarar los parámetros de consulta en el array de rutas.

Rutas :

{path:'list', component:ListComponent},

ComponenteLista (ejemplo):

constructor(private route: ActivatedRoute){}

...some code...

this.route.queryParams.subscribe((params) => params['key'])

or

this.route.snapshot.queryParams['key']

Artículos relacionados