Tengo un cambio de guardia pendiente como
import {CanDeactivate} from '@angular/router'; export interface ComponentCanDeactivate { canDeactivate: () => boolean | Observable<boolean>; } export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> { canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> { // if there are no pending changes, just allow deactivation; else confirm first return component.canDeactivate() ? true : // NOTE: this warning message will only be shown when navigating elsewhere within your angular app; // when navigating away from your angular app, the browser will show a generic warning message // see http://stackoverflow.com/a/42207299/7307355 confirm('WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.'); } }Mi problema es que también tengo algunos controles de pestañas que están vinculados a los parámetros de ruta de la página, por lo que cuando se navega por una pestaña, se actualizan los parámetros de ruta y viceversa. Actualizó el parámetro navegando a la ruta actual con el nuevo parámetro, que no vuelve a cargar el componente ya que todavía es la ruta actual. Mi problema es que no quiero que PendingChangesGuard considere estos cambios de ruta como una desactivación, ya que el componente todavía está en la página en una pestaña diferente.
Idealmente, podría pasar algunos parámetros al guardia diciéndole qué parámetros de ruta ignorar en el caso de volver a navegar a la ruta actual, y luego alguna forma de detectar dentro del guardia si los únicos cambios son uno de los parámetros ignorados . No estoy seguro de cómo detectar cambios en los parámetros como ese, ¿y las ideas?
Puede usar parámetros de consulta en lugar de parámetros de ruta. Los parámetros de consulta no hacen que los guardias se vuelvan a ejecutar. Esa no es la única diferencia entre los parámetros de consulta y los parámetros de ruta (o parámetros de matriz, o como se llamen), pero hace que valga la pena considerarlos. El enrutador angular es bastante obstinado, por lo que es posible que nunca encuentre una solución elegante.
Parámetros de consulta:
this.router.navigate([], { queryParams: {'tab': whatever} });o
<a [routerLink]="[]" [queryParams]="{'tab': whatever}">tab</a>