J'ai la configuration de route suivante dans mon projet Angular:
this.router.config //outputs the above array
Je peux maintenant obtenir ma configuration de route comme ceci:
export const routes: Routes = [
{ path: 'a/:id', loadChildren: './a/a.module#AModule', data: {a: a}},
{ path: 'b/:id', loadChildren: './b/b.module#BModule', data: {a: b}}
];
Le this.router.url affiche a , mais comment identifier correctement le bon Route puisque la configuration a le chemin non résolu et que le routeur tient le chemin résolu.
La raison pour laquelle je veux faire cela est d'accéder aux données dans le app.component où mon router-outlet est et non dans le composant lui-même (la documentation angulaire indique que l'objet data n'est accessible qu'au composant de route lui-même.
6 Réponses :
vous pouvez utiliser la sortie d'activation de la sortie du routeur dans le composant de votre application
onActivate(event : any) {
console.log(event);
}
il vous donne le composant laoded
dans votre app.component.ts p >
<router-outlet (activate)="onActivate($event)"></router-outlet>
exemple:
Je veux juste accéder aux données et non à l'ensemble du composant. Je n'ai pas besoin d'accéder au composant.
Je résoudrais ce problème en divisant la route de chargement différé pour la simplifier. Routage racine:
export const bModuleRoutes: Routes = [
{ path: 'item/:id', component: YourComponent, data: {a: b}}
];
Routage module A:
export const aModuleRoutes: Routes = [
{ path: 'item/:id', component: YourComponent, data: {a: a}}
];
Routage module B:
export const routes: Routes = [
{ path: 'a', loadChildren: './a/a.module#AModule'},
{ path: 'b', loadChildren: './b/b.module#BModule'}
];
Ici, vous avez un itinéraire individuel pour chaque module et vous pouvez jouer avec l'itinéraire individuel du module. Bon codage
Je ne sais pas comment cela m'aiderait à accéder aux données ? De plus, j'aimerais garder le chargement paresseux.
Je l'ai résolu en utilisant ce code:
this.router.events.subscribe(event => {
if (event instanceof RoutesRecognized) {
console.log(event.state.root.firstChild.data['a']);
}
});
IMO pour obtenir routeConfig, vous avez besoin de l'événement ActivationEnd des événements du routeur. J'ai recherché le paramètre dans le chemin pour le comparer de cette manière:
this.router.events.subscribe((event: any) => {
if (event instanceof ActivationEnd) {
const segmentArr = event.snapshot.routeConfig.path.split('/'); // there will be what you need
const lastSegment = segmentArr.pop();
// if the segment is not a param
if (lastSegment.includes(':')) {
// this is ":someparam" segment
}
}
});
Vous pouvez utiliser Router.state pour obtenir la configuration d'origine de Route .
Le routeur angulaire représente la route actuelle sous forme d'arborescence de routes hiérarchique due aux enfants code>, vous devez donc le parcourir pour obtenir l'enfant le plus profond qui est généralement ce que vous recherchez.
Peut être fait de la manière suivante:
let currentRoute = this.router.routerState.root;
while (currentRoute.firstChild) {
currentRoute = currentRoute.firstChild;
}
console.log(currentRoute.routeConfig); // returns `Route` object
Pour réagir aux changements, cela doit être dans this.router.events.subscribe(...).
Cette configuration est accessible sans événement, à partir de la racine onInit par exemple (mais peut également être utilisée dans le corps de l'abonnement):
RouterModule.forRoot([
{
path: 'login',
component: WelcomePageComponent,
data: {
hideHeader: true,
},
},
{
path: '',
canActivateChild: [AuthGuard, ACLGuard],
children: [
{
path: '',
redirectTo: 'wizard',
pathMatch: 'full',
},
{
path: 'wizard',
data: {
hideHeader: true,
},
},
],
},
],
La vérification de la longueur des enfants est pour la configuration à deux niveaux :
const config = !!this.activatedRoute.snapshot.root.firstChild.children.length
? this.activatedRoute.snapshot.root.firstChild.firstChild.data
: this.activatedRoute.snapshot.root.firstChild.data;
this.hideHeader = config['hideHeader'] ?? false;