Angular2 router.navigate() पहली बार

Question

काम नहीं कर रहा मैं निम्नलिखित मार्गों को परिभाषित किया है:

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: '' } 
]; 

मेरे ऐप्लिकेशन के उपयोगकर्ताओं को अपने "लैंडिंग" (घर) पेज सहित उनकी भूमिका के आधार पर पूरी तरह से अलग पृष्ठों को देखने।

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); 
    } 
} 

HomeComponent पहले प्रवेश के बाद लोड किया जाता है, रूट करने के लिए, उदाहरण के लिए, 'साइटों नेविगेट नहीं करता है: मैं इस तरह की भूमिका के आधार पर सही लैंडिंग पृष्ठ के लिए उपयोगकर्ता रूट करने के लिए मेरी HomeComponent उपयोग कर रहा हूँ 'मार्ग, लेकिन आश्चर्यजनक रूप से यह साइट सारांश निर्भरता को हल करता है। पहली बार यह रीडायरेक्ट करने में विफल रहता है, मैं दूसरे मार्ग पर नेविगेट कर सकता हूं और फिर '' रूट पर नेविगेट करने का प्रयास कर सकता हूं और यह सही ढंग से 'साइट्स' रूट पर रीडायरेक्ट करता है।

प्रारंभिक नेविगेशन क्यों काम नहीं कर रहा है? नेविगेट() काम करने के बारे में अन्य समान प्रश्नों के आधार पर, मैंने अपना मार्ग '/ साइट्स' और '.sites' में बदलने की कोशिश की है, लेकिन इसका कोई फायदा नहीं हुआ है।

अद्यतन ऐसा लगता है कि इसे मार्ग के लिए निर्भरता को हल करने के साथ करना है। यदि मेरे redirect() फ़ंक्शन में 'त्रुटि' मार्ग पर रीडायरेक्ट किया गया है, तो यह सफलतापूर्वक पहली बार होता है। यदि मैं अपने 'त्रुटि' मार्ग पर resolve जोड़ता हूं, तो यह पहली बार नेविगेट करने में विफल रहता है। अजीब बात यह है कि यह निर्भरता को पूरा करने के लिए HTTP कॉल बनाता है। क्या यह navigate() के वादे की वापसी का इंतजार नहीं कर रहा है?

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); 
} 

अद्यतन 3 मैं अपने 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)); 
    } 
} 

बार जब इसे लोड करने में विफल रहता

अद्यतन 2 यहाँ का अनुरोध वर्ग हैं मार्ग (पहली बार), नेविगेशन स्टार्ट का पहला घटना उदाहरण है और फिर नेविगेशन कैंसल का एक उदाहरण है। नेविगेशन कैंसल पर यह घटना कैसा दिखता है: {"id":2,"url":"/sites","reason":""}। जैसा कि आप देख सकते हैं, कोई कारण नहीं दिया गया है ...

Answer 1

रूट करने के लिए यह कोशिश मैं अभी भी नहीं जानता कि क्यों यह मेरा मार्ग नेविगेशन रद्द , लेकिन मेरे आसपास एक काम है जो ngInit को निम्न में बदलना है:

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

एक समय-समय पर मेरे रीडायरेक्ट कॉल को लपेटने से चीजों को एक अयोग्य विलंब के अपवाद के साथ काम करने की अनुमति मिलती है। ऐसा लगता है कि यह किसी प्रकार का समय मुद्दा है? यदि मैं टाइमआउट को 20 तक सेट करने का प्रयास करता हूं तो यह भी काम नहीं करता है।

Answer 2

आपको कन्स्ट्रक्टर में साइड इफेक्ट्स के साथ चीजें नहीं करना चाहिए। इसके बजाय, ngOnInit लागू:

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

भी देखें: Difference between Constructor and ngOnInit

Answer 3

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']);