One place for hosting & domains

      Cómo usar los parámetros de consulta en Angular


      Introducción

      Los parámetros de consulta en Angular permiten pasar los parámetros opcionales a través de cualquier ruta en la aplicación. Los parámetros de consulta son diferentes a los parámetros de ruta regulares, que solo están disponibles en una ruta y no son opcionales (por ejemplo, /product/:id).

      En este artículo, nos referiremos a un ejemplo de una aplicación que muestra una lista de productos. Proporcionaremos valores de order opcional y price-range en los que el componente receptor puede leer y actuar. Los valores proporcionados afectarán el orden y filtrado de la lista de productos.

      Uso de parámetros de consulta con Router.navigate

      Si navega a la ruta de forma imperativa usando Router.navigate, pasará los parámetros de consulta con queryParams.

      En nuestro ejemplo, si queremos enrutar visitantes a los productos con la lista ordenada por popularidad, se verá así:

      goProducts() {
        this.router.navigate(["https://www.digitalocean.com/products"], { queryParams: { order: 'popular' } });
      }
      

      Esto dará como resultado una URL con el siguiente aspecto:

      http://localhost:4200/products?order=popular
      

      También puede proporcionar múltiples parámetros de consulta. En nuestro ejemplo, si queremos enrutar visitantes a los productos con la lista ordenada por popularidad y filtrada con un alto rango de precios, se verá así:

      goProducts() {
        this.router.navigate(["https://www.digitalocean.com/products"], { queryParams: { order: 'popular', 'price-range': 'not-cheap' } });
      }
      

      Esto dará como resultado una URL con el siguiente aspecto:

      http://localhost:4200/products?order=popular&price-range=not-cheap
      

      Ahora ya sabe cómo puede usar queryParams para configurar los parámetros de consulta.

      Conservar o combinar parámetros de consulta con queryParamsHandling

      De forma predeterminada, los parámetros de consulta se pierden en cualquier acción de navegación posterior. Para evitar esto, puede configurar queryParamsHandling, ya sea para 'preserve' o 'merge'.

      En nuestro ejemplo, si queremos enrutar visitantes desde una página con el parámetro de consulta { order: 'popular' } a la página /users, manteniendo los parámetros de consulta, usaremos 'preserve':

      goUsers() {
        this.router.navigate(['/users'], { queryParamsHandling: 'preserve' });
      }
      

      Esto dará como resultado una URL con el siguiente aspecto:

      http://localhost:4200/users?order=popular
      

      En nuestro ejemplo, si queremos enrutar visitantes desde una página con el parámetro de consulta { order: 'popular' } a la página /users, pasando el parámetro de consulta { filter: 'new' }, usaremos 'merge':

      goUsers() {
        this.router.navigate(['/users'], { queryParams: { filter: 'new' }, queryParamsHandling: 'merge' });
      }
      

      Esto dará como resultado una URL con el siguiente aspecto:

      http://localhost:4200/users?order=popular&filter=new
      

      Nota: Conservar los parámetros de consulta utilizados para hacerse con preserveQueryParams configurado en true, pero esto ahora es obsoleto en Angular 4+ a favor de queryParamsHandling.

      Ahora ya sabe cómo puede usar queryParamsHandling para conservar y combinar los parámetros de consulta.

      En nuestro ejemplo, si en vez de eso está usando la directiva RouterLink para navegar a la ruta, tendría que usar queryParams de esta forma:

      <a [routerLink]="["https://www.digitalocean.com/products"]" [queryParams]="{ order: 'popular'}">
        Products
      </a>
      

      Y en nuestro ejemplo, si desea 'preserve' o 'merge' parámetros de consulta en la posterior navegación, tendría que usar queryParamsHandling de esta forma:

      <a [routerLink]="['/users']"
         [queryParams]="{ filter: 'new' }"
         queryParamsHandling="merge">
        Users
      </a>
      

      Ahora ya sabe cómo puede usar queryParams y queryParamsHandling con RouterLink.

      Acceso a los valores del parámetro de consulta

      Ahora que sabemos pasar los parámetros de consulta opcionales a una ruta, veamos cómo acceder a estos valores en las rutas resultantes. La clase ActivatedRoute tiene una propiedad queryParams que devuelve un observable de los parámetros de consulta que están disponibles en la URL actual.

      Dada la siguiente ruta URL:

      http://localhost:4200/products?order=popular
      

      Podemos acceder al parámetro de consulta order de esta forma:

      // ...
      import { ActivatedRoute } from '@angular/router';
      import 'rxjs/add/operator/filter';
      
      @Component({ ... })
      export class ProductComponent implements OnInit {
        order: string;
        constructor(private route: ActivatedRoute) { }
      
        ngOnInit() {
          this.route.queryParams
            .filter(params => params.order)
            .subscribe(params => {
              console.log(params); // { order: "popular" }
      
              this.order = params.order;
              console.log(this.order); // popular
            }
          );
        }
      }
      

      En el registro de la consola, veremos el objeto params:

      Output

      { order: "popular" }

      Y el valor params.order

      Output

      popular

      También existe queryParamMap, que devuelve un observable con un objeto paramMap

      Dada la siguiente ruta URL:

      http://localhost:4200/products?order=popular&filter=new
      

      Podemos acceder al parámetro de consulta order de esta forma:

      this.route.queryParamMap
        .subscribe((params) => {
          this.orderObj = { ...params.keys, ...params };
        }
      );
      

      Aquí hemos utilizado el operador de propagación del objeto y así es como se verán los datos en orderObj:

      {
        "0": "order",
        "1": "filter",
        "params": {
          "order": "popular",
          "filter": "new"
        }
      }
      

      Ahora ya sabe cómo puede usar queryParams y queryParamMap para acceder a los valores en las rutas resultantes.

      Conclusión

      En este artículo, utilizamos diferentes ejemplos para configurar y obtener parámetros de consulta en Angular. Presentamos queryParams y queryParamsHandling con Router.navigate y RouterLink. También presentamos queryParams y queryParamMap con ActivatedRoute.

      Si desea obtener más información sobre Angular, consulte nuestra página sobre el tema Angular para ver ejercicios y proyectos de programación.



      Source link