Accès aux paramètres de route dans les composants et services de mise en page d'Angular 7/8 ?

Question

J'ai une application multitenant qui identifie les locataires en fonction d'un paramètre de route appelé organization . J'ai diverses parties de l'application qui doivent changer de comportement en fonction de l'organisation transmise par le paramètre route, mais je rencontre des problèmes pour accéder au paramètre ailleurs que dans le composant vers lequel le routeur a navigué.

Dans plusieurs zones de mon application, j'ai placé une variante du code suivant :

export class OrganizationSidebarComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(params => {
      console.log('[OrganizationSidebarComponent] ID IS ' + params['organization']);
      console.log(params);
    });
    this.route.paramMap.subscribe(paramMap => {
      console.log('[OrganizationSidebarComponent] ID from ParamMap: ' + paramMap.get('organization'));
    });
    console.log('[OrganizationSidebarComponent] ID using snapshot paramMap: ' + this.route.snapshot.paramMap.get('organization'));
    console.log('[OrganizationSidebarComponent] ID using snapshot params: ' + this.route.snapshot.params.organization);
  }
}

Cependant, lorsque l'on accède aux pages, le résultat ressemble à ce qui suit :

Mes itinéraires sont configurés comme suit :

const routes: Routes = [
  {
    path: 'Organization',
    component: OrganizationsLayoutComponent,
    children: [
      {
        path: ':organization',
        component: OrganizationDashboardComponent,
        canActivate: [AuthGuard]
      }
    ]
  }
];

Dans un monde parfait, je pourrais accéder aux valeurs à partir d'un service injecté afin de disposer d'un service de récupération centralisé que je pourrais utiliser pour obtenir les informations requises, mais j'ai simplement des difficultés à récupérer les paramètres de la route à partir d'un endroit autre que le composant vers lequel la navigation est effectuée.

Comment puis-je accéder à ces informations ?

Answer 1

Je suggère de le faire d'une autre manière, (en fonction de l'énoncé de votre problème) au lieu de lire l'organisation dans plusieurs composants et de charger les données, lisez-la dans le composant app.comme ci-dessous

ajouter cette méthode dans App.component.ts

  mergeRouteParams(router: Router): { [key: string]: string } {
    let params = {};
    let route = router.routerState.snapshot.root;
    do {
      params = { ...params, ...route.params };
      route = route.firstChild;
    } while (route);

    return params;
  }

puis dans ngOnInit faire ceci

    this.router.events.subscribe((e) => {
      if (e instanceof NavigationEnd) {
        const mergedParams = this.mergeRouteParams(this.router);
        console.log(mergedParams);
      }
    });

et bien sûr ajouter private router: Router à votre constructeur

Travail en pile

https://stackblitz.com/edit/angular-merge-route-params

Url à vérifier https://angular-merge-route-params.stackblitz.io/dictionary/dict/code

Solution 2

Une autre façon d'obtenir tous les paramètres est d'utiliser la configuration des routes.

export const routingConfiguration: ExtraOptions = {
    paramsInheritanceStrategy: 'always',
};

@NgModule({
    imports: [RouterModule.forRoot(routes, routingConfiguration)],
    exports: [RouterModule],
})
export class AppRoutingModule { }

maintenant si vous injectez route: ActivatedRoute dans le params ou paramsMap, vous trouverez tous les paramètres des parents, y compris la route de l'enfant.