Tengo una matriz de objetos de estado. Cada estado tiene un nombre y un booleano establecido en falso de forma predeterminada.
Representa una casilla de verificación en un formulario con filtros, cuando una casilla de verificación está marcada, bool se establece en verdadero:
const filters.statuses = [ { name: "pending", value: false }, { name: "done", value: false }, ];Estoy usando Angular HTTP Params para pasar parámetros en la URL.
filters.statuses.forEach((status) => { if (status.value) { this.urlParams = this.urlParams.append('statuses[]', status.name); } });Los parámetros de URL se ven como cuando se verifica un estado: &statuses%5B%5D=pendiente
Mi problema es cuando quiero desmarcarme. Sé que HTTP Params es inmutable, por lo tanto, estoy tratando de eliminar el parámetro cuando la casilla de verificación no está marcada, así que configúrela en falso:
...else { this.urlParams = this.urlParams.delete('statuses'); }Pero no funciona, la URL no cambia. Y si vuelvo a verificar como verdadero después de eso, la URL se ve así:
&status%5B%5D=pendiente&status%5B%5D=pendiente
¿Cómo puedo eliminar parámetros, si el valor del estado es falso y mantener otros estados en la URL? Proyecto en Angular 10.
Gracias por la ayuda.
ACTUALIZACIÓN: funciona para eliminar, mi nombre de parámetro no era bueno:
else { this.urlParams = this.urlParams.delete('statuses[]', status.name); }Pero, mi otro problema, es cuando marco 2 o más casillas de verificación, la función de agregar escribe en la URL: &status%5B%5D=pendiente&status%5B%5D=pendiente&status%5B%5D=hecho
He preparado un ejemplo para tratar de responder a tu pregunta (si entiendo bien).
Puede cambiar el estado de las casillas de verificación o la URL para jugar con él. Además, agregué botones de ayuda, que lo llevarán a diferentes casos (cambiando la URL).
Aquí está el ejemplo: https://stackblitz.com/edit/angular-router-basic-example-cffkwu?file=app/views/home/home.component.ts
Hay algunas partes. Hablaremos de HomeComponent.
activatedRoute.queryParams , así es como obtiene los parámetros y configura las casillas de verificación (el modelo de las casillas de verificación)ngModelChange , así es como cambia la ruta de acuerdo con el estado de las casillas de verificaciónCentrémonos en los elementos 2 y 3.
El segundo. Representación del estado correcto de acuerdo con los parámetros de consulta de ruta. Aquí está el código:
ngOnInit() { this.sub = this.activatedRoute.queryParams.subscribe((params) => { const statusesFromParams = params?.statuses || []; this.statuses = this.statuses.map((status) => { if (statusesFromParams.includes(status.name)) { return { name: status.name, active: true, }; } return { name: status.name, active: false, }; }); }); } Aquí analizo los statuses queryParam y configuro el modelo de estados. Yo decido cuál está activo y cuál no está aquí.
El tercero. Debe actualizar la URL de acuerdo con el estado de las casillas de verificación. Aquí está el código:
// HTML <ng-container *ngFor="let status of statuses"> {{ status.name}} <input type="checkbox" [(ngModel)]="status.active" (ngModelChange)="onInputChange()" /> <br /> </ng-container> // TypeScript onInputChange() { this.router.navigate(['./'], { relativeTo: this.activatedRoute, queryParams: { statuses: this.statuses .filter((status) => status.active) .map((status) => status.name), }, }); } Aquí tienes el controlador ngModelChange. Cuando cualquier casilla de verificación está marcada o desmarcada, se invoca este controlador. En el controlador, uso el método de navigate del enrutador para cambiar la URL. Recojo el estado real de las casillas de verificación y construyo los parámetros de consulta para el evento de navegación.
Entonces, ahora tiene un enlace del estado de las casillas de verificación a la URL y viceversa. Espero que esto ayude.