Comment définir les paramètres de requête par défaut pour Route dans Angular 7?

Pour votre question en particulier:

Une Route sans paramètres de requête peut-elle être redirigée vers une Route avec des paramètres de requête?

Je ne pense pas que cela puisse fonctionner parce que le? dans une requête est un séparateur, qui ne fait pas partie de la chaîne de requête d'une URL.

Alternative 1 - puisque vous utilisez ngrx, une façon de le faire est d'utiliser le custom sérialiseur. Les documents du site ngrx.io montrent un exemple de retour des paramètres avec sérialisation. C'est ici que vous pouvez ajouter une logique pour ajouter une valeur par défaut aux paramètres si elle n'existe pas. Je refuse que cela soit moins idéal car il se déclenchera sur chaque itinéraire, mais cela peut simplifier vos itinéraires.

{ path: 'user/:userId/agent', redirectTo: '/user/:userId/agent/0', pathMatch: 'full' },
{ path: 'user/:userId/agent/:page', component: AgentListComponent },

Alternative 2 - Vous pouvez encapsuler le HttpClient ou, de préférence, créer une méthode de liste de pages générique qui vérifie cela et l'ajoute à la requête s'il n'y a pas de page. Cette réponse montre un exemple de comment réaliser l'ajout de paramètres.

Alternative 3 strong> - Vous pouvez utiliser la page dans le cadre du chemin et effectuer des contournements / modifications si nécessaire pour générer vos requêtes.

import { Params, RouterStateSnapshot } from '@angular/router';
import { RouterStateSerializer } from '@ngrx/router-store';

export interface RouterStateUrl {
  url: string;
  params: Params;
  queryParams: Params;
}

export class CustomSerializer implements RouterStateSerializer<RouterStateUrl> {
  serialize(routerState: RouterStateSnapshot): RouterStateUrl {
    let route = routerState.root;

    while (route.firstChild) {
      route = route.firstChild;
    }

    const {
      url,
      root: { queryParams },
    } = routerState;
    const { params } = route;

    // Add here
    if (<insert url logic> && queryParams.page === undefined) {
        queryParams.page = 0;
    }

    // Only return an object including the URL, params and query params
    // instead of the entire snapshot
    return { url, params, queryParams };
  }
}

Dans notre application Angular-7, nous utilisons @ngrx et @ ngrx / router-store pour obtenir les paramètres de requête dans l'état.

Pour synchroniser les paramètres de requête et l'état, vous avez besoin d'un effet qui capture toute action qui entraîne un changement de page dans votre application. À l'intérieur de l'événement, vous aurez quelque chose comme:

export function initStateFromQueryParams(
    reducer: ActionReducer<AppState>
): ActionReducer<AppState> {
    return function(state, action) {
        const newState = reducer(state, action);
        if ([INIT.toString(), UPDATE.toString()].includes(action.type)) {
            const urlParams = new URLSearchParams(window.location.search);
            return { ...newState, page: urlParams.get("page") };
        }
        return newState;
    };
}

Ensuite, un méta-réducteur pour mettre à jour l'état des paramètres de requête lors du rechargement de la page:

@Effect({dispatch:false})
setRouteParams = this.actions$.pipe(
    ofType<ActionCausingPageChange>("action name"),
    tap( action =>{

        let a = { page: action.payload.page };
        // or in case it's not part of action payload, get it from store
        this.router.navigate(
            [], {
                relativeTo: this.route,
                queryParamsHandling: 'merge',
                queryParams: a
            });
        }
    )
);

Pour moi, cela a fonctionné sur le chemin racine:

{
  path: '',
  redirectTo: '/foo?bar=baz',
  pathMatch: 'full'
}

Cependant, en essayant la même chose avec un paramètre nommé (comme votre : userId ) cela ne fonctionne pas