Angular2 Routage avec les paramètres échoue

J'ai des problèmes (toutes sortes d'erreurs dans des endroits très inattendus) et ma meilleure estimation est que cela arrive à cause de la façon dont le routage est mis en place.Angular2 Routage avec les paramètres échoue

Ceci est mon app-routing.module.ts

const appRoutes: Routes = [ 
    { path: 'calendar', component: CalendarComponent, canActivate: [AuthGuard] }, 
    { path: 'calendar/:urlString', component: CalendarComponent, canActivate: [AuthGuard] }, 
    { path: 'myprofile', component: ProfileComponent, canActivate: [AuthGuard] }, 
    { path: 'profiles', component: ProfileComponent, canActivate: [AuthGuard] }, 
    { path: 'locations', component: LocationComponent, canActivate: [AuthGuard] }, 
    { path: 'login', component: AuthComponent }, 
    { path: '', redirectTo: '/login', pathMatch: 'full' } 
]; 

@NgModule({ 
    imports: [ RouterModule.forRoot(appRoutes) ], 
    exports: [ RouterModule ] 
})

Puis, en CalendarComponent.ts J'ai ce morceau de code:

imports (...) 

constructor(
    private activatedRoute: ActivatedRoute, 
){ 
} 

public ngOnInit(): void { 
    this.activatedRoute.params.subscribe((params: Params) => { 
     this.resolveURLParams(params); 
    }); 
    } 

    public resolveURLParams(params): void { 

    // do stuff based on params 

    }

Quoi qu'il en soit, à seulement une demi il y a un an (certains RC @ Angular2) je pourrais commencer l'application en tapant l'un de ceux-ci directement dans le navigateur

localhost:3000,

localhost:3000/calendar ou

localhost:3000/calendar/2017-05-27

et obtiendrait des résultats attendus. Maintenant, je ai à partir de localhost:3000, de sorte que les app routes moi par ../login ->../calendar ->../calendar/2017-05-27, sinon je reçois toutes sortes de problèmes, comme Cannot read property subscribe of null ou Cannot activate already activated outlet. Je suppose que le routage a été mis à jour et je suis à la traîne. Toute aide à ce sujet, s'il vous plaît?

Source

2017-05-27 pop

Il vous serait utile de répertorier les erreurs que vous voyez. – Muirik

Si je commence par '/ calendar', je reçois ** Erreur: Uncaught (en promesse): Erreur: Impossible d'activer une prise déjà activée **. Si je commence par '/ calendar/2017-05' je reçois ** Erreur: Uncaught (en promesse): TypeError: Impossible de lire la propriété 'subscribe' de null ** à la fonction resolveUrlParams – pop

Mhm, je ne peux pas reproduire votre type d'erreur. Pouvez-vous fournir un échantillon plnkr runnable? – Batajus

Il pourrait y avoir un délai de temps en vous inscrivant à la route params, je vous suggère d'utiliser l'option inobservable en utilisant le service ActivatedRouteSnapshot

Injecter le service ActivatedRouteSnapshot et obtenir les params utilisant

this.activatedRoute.route.snapshot.params.urlString

Remarque: utiliser pathMatch:full pour la définition

{ path: 'calendar', component: CalendarComponent, canActivate: [AuthGuard] , pathMatch:'full'},

que votre itinéraire tombera par l'ordre de définition et essaye de faire correspondre le param avec le ci-dessus

Source

2017-05-27 21:21:31 Aravind

Ceci est en fait un bummer, mais il y avait aucun problème avec la façon dont les routes et l'abonnement ActivatedRoute travaillé. Le problème était avec l'AuthGuard que j'utilisais, qui était cassé. Maintenant que j'ai réparé la garde, tous les problèmes ont disparu. Donc, merci d'essayer d'aider.

Source

2017-05-29 07:25:46 pop

Angular2 Routage avec les paramètres échoue

Répondre

Questions connexes