ANG_FRONT

Capítulo 8.5. Query Params en Angular

• ¿Qué son los Query Params?
• Los query params son parte de la URL que se utilizan para enviar datos a un servidor o para definir el estado de la aplicación. Se presentan en la URL después del signo de interrogación (?). Por ejemplo:

https://example.com/products?category=electronics&sort=price

• En este caso, category y sort son query params.

• Configuración de Rutas

• No necesitas definir explícitamente los query params en la configuración de rutas. Angular permite que cualquier ruta acepte query params sin necesidad de especificarlos.

• Ejemplo de Ruta

const routes: Routes = [
  { path: 'products', component: ProductsComponent },
];

• Navegación con Query Params

• Puedes navegar a una ruta con query params utilizando el método navigate() del objeto Router.

• Ejemplo de navegación:

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

@Component({
  selector: 'app-product-list',
  template: `
    <button (click)="goToProducts('electronics', 'price')">Ver Productos Electrónicos</button>
  `
})
export class ProductListComponent {
  constructor(private router: Router) {}

  goToProducts(category: string, sort: string) {
    this.router.navigate(['/products'], { queryParams: { category, sort } });
  }
}

• Acceso a Query Params

• Para acceder a los query params en un componente, puedes usar el servicio ActivatedRoute. Este servicio permite obtener los parámetros de la URL en el componente donde se ha activado la ruta.

• Ejemplo de acceso ```typescript

import { Component, OnInit } from ‘@angular/core’; import { ActivatedRoute } from ‘@angular/router’;

@Component({ selector: ‘app-products’, template: ` <h1>Productos</h1> <p>Categoría: </p> <p>Ordenar por: content<h1 id="capítulo-84-navegación-con-el-objeto-router-en-angular">Capítulo 8.4. Navegación con el objeto Router en Angular</h1>

Objetivo de la práctica

• Navegar mediante el objeto Router.
• Gestionar parámetros de consulta.

Duración aproximada

• 10 minutos.

Instrucciones

• Inyección del objeto Router

• Para utilizar el objeto Router, primero debes inyectarlo en el componente. Esto se hace a través del constructor del componente.

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  constructor(private router: Router) {}
}

• Navegación Programática

• Una de las funcionalidades más útiles del objeto Router es la capacidad de navegar programáticamente a diferentes rutas. Esto se realiza utilizando el método navigate().

• Navegación Simple ```typescript

goToAbout() { this.router.navigate([‘/about’]); }

- *Navegación con Parámetros*

- Si necesitas navegar a una ruta que incluye parámetros, puedes pasarlos como un array:

```typescript

goToUserDetail(userId: number) {
  this.router.navigate(['/user', userId]);
}

• Navegación con Query Parameters

• También puedes añadir parámetros de consulta a las rutas utilizando un objeto adicional:

goToProducts(category: string) {
  this.router.navigate(['/products'], { queryParams: { category } });
}

• Navegación condicional

• El objeto Router también permite implementar lógica de navegación condicional. Por ejemplo, puedes redirigir a los usuarios a diferentes rutas según su estado de autenticación:

if (isAuthenticated) {
  this.router.navigate(['/dashboard']);
} else {
  this.router.navigate(['/login']);
}

• Retorno a la ruta anterior

• Para regresar a la ruta anterior, utilizar el método navigate() con el valor [’/’] o, si necesitas volver exactamente a la última ruta, usar el servicio Location de Angular:

import { Location } from '@angular/common';

constructor(private location: Location) {}

goBack() {
  this.location.back();
}

• Navegación en servicios

• Además de los componentes, también puedes usar el objeto Router en servicios para realizar redirecciones. Esto es útil, por ejemplo, para manejar la lógica de autenticación en un servicio de usuario.

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

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor(private router: Router) {}

  login() {
    // Lógica de autenticación
    this.router.navigate(['/dashboard']);
  }

  logout() {
    this.router.navigate(['/login']);
  }
}

highlighter_prefix highlighter_suffix jekyllJekyll::Drops::JekyllDroplayout{“layout”=>”default”}page{“permalink”=>”/Capítulo8/Capitulo8.5/”, “layout”=>”page”, “title”=>”Capítulo 8.5. Query Params en Angular”, “content”=>”# Capítulo 8.5. Query Params en Angular\n\n- ¿Qué son los Query Params?\n- Los query params son parte de la URL que se utilizan para enviar datos a un servidor o para definir el estado de la aplicación. Se presentan en la URL después del signo de interrogación (?). Por ejemplo:\n\nbash\n\nhttps://example.com/products?category=electronics&sort=price\n\n\n- En este caso, category y sort son query params.\n\n- Configuración de Rutas\n\n- No necesitas definir explícitamente los query params en la configuración de rutas. Angular permite que cualquier ruta acepte query params sin necesidad de especificarlos.\n\n- Ejemplo de Ruta\n\ntypescript\n\nconst routes: Routes = [\n { path: 'products', component: ProductsComponent },\n];\n\n\n- Navegación con Query Params\n\n- Puedes navegar a una ruta con query params utilizando el método navigate() del objeto Router.\n\n- Ejemplo de navegación:\n\ntypescript\n\nimport { Component } from '@angular/core';\nimport { Router } from '@angular/router';\n\n@Component({\n selector: 'app-product-list',\n template: `\n <button (click)=\"goToProducts('electronics', 'price')\">Ver Productos Electrónicos</button>\n `\n})\nexport class ProductListComponent {\n constructor(private router: Router) {}\n\n goToProducts(category: string, sort: string) {\n this.router.navigate(['/products'], { queryParams: { category, sort } });\n }\n}\n\n\n- Acceso a Query Params\n- Para acceder a los query params en un componente, puedes usar el servicio ActivatedRoute. Este servicio permite obtener los parámetros de la URL en el componente donde se ha activado la ruta.\n\n- Ejemplo de acceso\ntypescript\n\nimport { Component, OnInit } from '@angular/core';\nimport { ActivatedRoute } from '@angular/router';\n\n@Component({\n selector: 'app-products',\n template: `\n <h1>Productos</h1>\n <p>Categoría: {{ category }}</p>\n <p>Ordenar por: {{ sort }}</p>\n `\n})\nexport class ProductsComponent implements OnInit {\n category!: string;\n sort!: string;\n\n constructor(private route: ActivatedRoute) {}\n\n ngOnInit() {\n this.route.queryParams.subscribe(params => {\n this.category = params['category'];\n this.sort = params['sort'];\n });\n }\n}\n\n\n\n- Actualización de Query Params\n\n- Si deseas actualizar los query params sin recargar el componente, utilizar el método navigate del Router con un objeto queryParams que contenga los nuevos valores.\n\n- Ejemplo de actualización:\n\ntypescript\n\nupdateCategory(newCategory: string) {\n this.router.navigate([], {\n relativeTo: this.route,\n queryParams: { category: newCategory },\n queryParamsHandling: 'merge', // Mantiene los otros query params\n });\n}\n\n\n- Eliminación de Query Params\n\n- Para eliminar un query param específico, simplemente se debe establecer su valor en null o undefined en el objeto queryParams.\n\n- Ejemplo de eliminación:\n\ntypescript\n\nremoveSortParam() {\n this.router.navigate([], {\n relativeTo: this.route,\n queryParams: { sort: null }, // Eliminará el query param 'sort'\n queryParamsHandling: 'merge', // Mantiene otros parámetros\n });\n}\n\n\n”, “dir”=>”/Capítulo8/Capitulo8.5/”, “name”=>”Readme.md”, “path”=>”Capítulo8/Capitulo8.5/Readme.md”, “url”=>”/Capítulo8/Capitulo8.5/”}paginatorsiteJekyll::Drops::SiteDrop</p> ` }) export class ProductsComponent implements OnInit { category!: string; sort!: string;

constructor(private route: ActivatedRoute) {}

ngOnInit() { this.route.queryParams.subscribe(params => { this.category = params[‘category’]; this.sort = params[‘sort’]; }); } }

- *Actualización de Query Params*

- Si deseas actualizar los query params sin recargar el componente, utilizar el método navigate del Router con un objeto queryParams que contenga los nuevos valores.

- Ejemplo de actualización:

```typescript

updateCategory(newCategory: string) {
  this.router.navigate([], {
    relativeTo: this.route,
    queryParams: { category: newCategory },
    queryParamsHandling: 'merge', // Mantiene los otros query params
  });
}

• Eliminación de Query Params

• Para eliminar un query param específico, simplemente se debe establecer su valor en null o undefined en el objeto queryParams.

• Ejemplo de eliminación:

removeSortParam() {
  this.router.navigate([], {
    relativeTo: this.route,
    queryParams: { sort: null }, // Eliminará el query param 'sort'
    queryParamsHandling: 'merge', // Mantiene otros parámetros
  });
}