J'ai les itinéraires suivants définis:

export const routes: Routes = [
    { path: '', component: HomeComponent, pathMatch: 'full', canActivate: [AuthGuardService] },
    { path: 'sites', component: SiteIndexComponent, resolve: { siteSummaries: SiteSummariesResolve }, canActivate: [AuthGuardService] },
    { path: 'qa-tasks', component: QaTaskIndexComponent, resolve: { investigations: InvestigationsResolve, reviews: ReviewsResolve }, canActivate: [AuthGuardService] },
    { path: 'error', component: ErrorComponent },
    { path: '**', redirectTo: '' }
];

Les utilisateurs de mon application voient des pages totalement différentes en fonction de leur rôle, y compris leur page d'accueil (page d'accueil). J'utilise mon HomeComponent pour diriger l'utilisateur vers la page de destination appropriée en fonction d'un rôle comme celui-ci:

export class HomeComponent implements OnInit {

    private roles: any;

    constructor(private router: Router,
        private authService: AuthService) { }

    ngOnInit() {
        var currentUser = this.authService.getCurrentUser();
        this.roles = currentUser.roles;
        this.redirect();
    }

    private redirect() {
        var route;
        if (this.inRole('site-user-role')) {
            route = 'sites';
        }
        else if (this.inRole('qa-user-role')) {
            route = 'qa-tasks';
        }
        if (route) {
            this.router.navigate([route]);
        }
        else {
            this.router.navigate(['error']);
        }
    }

    private inRole(role) {
        return _.includes(this.roles, role);
    }
}

Lorsque le HomeComponent est chargé pour la première fois après la connexion, la route ne navigue pas, par exemple, vers la route 'sites', mais elle résout étrangement la dépendance siteSummaries. Après la première fois que la redirection échoue, je peux naviguer vers une autre route, puis essayer de naviguer vers la route '' et elle redirige correctement vers la route `` sites ''.

Pourquoi la navigation initiale ne fonctionne-t-elle pas? En me basant sur d'autres questions similaires sur le fait que naviguer () ne fonctionne pas, j'ai essayé de changer mon itinéraire vers «/ sites» et «./sites», mais en vain.

Mettre à jour Il semble que cela ait à voir avec la résolution d'une dépendance pour une route. Si la redirection vers la route "error" dans ma fonction redirect(), elle le fait avec succès la première fois. Si j'ajoute un resolve à mon itinéraire "d'erreur", il ne parvient pas à y accéder la première fois. La chose étrange est qu'il fait l'appel HTTP pour remplir la dépendance. Est-ce un problème parce qu'il n'attend pas le retour de la promesse de navigate()?

Mise à jour 2 Voici les cours demandés:

export class SiteIndexComponent implements OnInit {

    public siteSummaries: any;
    public totalRegisteredCount: number;
    public totalscreenFailedCount: number;
    public totalinProgressCount: number;

    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        this.siteSummaries = this.route.snapshot.data['siteSummaries'];
        this.totalRegisteredCount = this.getTotal('registeredCount');
        this.totalscreenFailedCount = this.getTotal('screenFailedCount');
        this.totalinProgressCount = this.getTotal('inProgressCount');
    }

    private getTotal(prop): number {
        var total = 0;
        _.forEach(this.siteSummaries, function (summary) {
            return total += summary[prop];
        });
        return total;
    }
}

@Injectable()
export class SiteSummariesResolve implements Resolve<any> {

    constructor(private sitesService: SitesService) { }

    resolve(route: ActivatedRouteSnapshot) {
        return this.sitesService.getSiteSummaries();
    }
}

getCurrentUser(): any {
    var currentUser = sessionStorage.getItem('currentUser');
    if (!currentUser) {
        return null;
    }
    return JSON.parse(currentUser);
}

Mise à jour 3 J'ai jeté ceci dans mon app.component:

private navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
        console.log('started: ' + JSON.stringify(event));
    }
    if (event instanceof NavigationEnd) {
        console.log('ended: ' + JSON.stringify(event));
    }
    if (event instanceof NavigationCancel) {
        console.log('cancelled:' + JSON.stringify(event));
    }
    if (event instanceof NavigationError) {
        console.log('error:' + JSON.stringify(event));
    }
}

Aux moments où le chargement de l'itinéraire échoue (la première fois), il y a d'abord une instance d'événement de NavigationStart, puis une instance de NavigationCancel. Voici à quoi ressemble l'événement sur NavigationCancel: {"id":2,"url":"/sites","reason":""}. Comme vous pouvez le voir, aucune raison n'est donnée ...

11
im1dermike 20 avril 2017 à 16:25

3 réponses

Meilleure réponse

Je ne sais toujours pas pourquoi cela annulait ma navigation d'itinéraire, mais une solution que j'ai trouvée consiste à remplacer ngInit par ce qui suit:

ngOnInit() {
    var currentUser = this.authService.getCurrentUser();
    this.roles = currentUser.roles;
    var that = this;
    setTimeout(function () { that.redirect(); }, 50);
}

Envelopper mon appel de redirection dans un délai d'expiration permet aux choses de fonctionner comme prévu à l'exception d'un délai imperceptible. Il semblerait que ce soit une sorte de problème de timing? Si j'essaie de régler le délai d'expiration à 20, cela ne fonctionne pas non plus.

9
im1dermike 4 mai 2017 à 20:30

Vous ne devez pas faire de choses avec des effets secondaires dans le constructeur. Au lieu de cela, implémentez ngOnInit:

class HomeComponent implements OnInit {
  ngOnInit() {
    // navigate things...
  }
}

Voir aussi: Différence entre Constructor et ngOnInit

0
Community 23 mai 2017 à 12:02

Essayez ceci pour le routage

import { Routes, RouterModule } from '@angular/router';


export const router: Routes = [
   { path: '',  redirectTo: 'main', pathMatch: 'full'},
  { path: 'main', component:AdminBodyComponent  },
  { path: 'admin', component:AdminComponent  },
  { path: 'posts',component:PostsComponent},
  { path: 'addposts',component:AddPostComponent}];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);
step2:
inject into your .ts file
constructor(
  private router:Router,
  ...
)
step3:
this.router.navigate(['/addposts']);
-1
Arvind Audacious 28 avril 2017 à 11:18