2017-12-03 12 views
16

मैं कुछ घटक है कि सूची उत्पन्न करता है में एक साधारण कोणीय मार्गबेकार कैसे करें (वादे में): EmptyError: router.navigate के कारण अनुक्रम में कोई तत्व नहीं है?

const appRoutes: Routes = [ 
    { path: ''  ,redirectTo: '/recipes', pathMatch: 'full'}, 
    { path: 'recipes'    , component: RecipesComponent}, 
    { path: 'recipes/:recipeName' , component: RecipesComponent}, 
]; 

लागू करने के लिए कोशिश कर रहा हूँ, मैं एक समारोह है कि एक अपडेट के क्लिक पर चर और मार्गों राज्य है, हालांकि मैं भी तंत्र ग्राहक प्राप्त करने में कठिनाई प्रारंभिकरण पर हो रहा है।

ngOnInit() { 
    this.route.params 
     .subscribe(
     (params: {Params}) => { 

      this.selectedRecipe = this.findRecipeByName(params['recipeName']); 
     }); 
    } 


    navRecipe(recipeName: string): void { 
     let path = '/recipes/' + recipeName; 
     this.selectedRecipe = this.findRecipeByName(recipeName); 
     this.router.navigate([path]); 
    } 

लेकिन जब मैं एक लिंक पैरामीटर मैं निम्नलिखित मिल के साथ घटक के लिए रास्ता बदल देता है पर क्लिक करने की कोशिश:

core.js:1350 ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence 
EmptyError: no elements in sequence 
    at new EmptyError (EmptyError.js:28) 
    at FirstSubscriber._complete (first.js:154) 
    at FirstSubscriber.Subscriber.complete (Subscriber.js:122) 
    at MergeMapSubscriber._complete (mergeMap.js:150) 
    at MergeMapSubscriber.Subscriber.complete (Subscriber.js:122) 
    at MapSubscriber.Subscriber._complete (Subscriber.js:140) 
    at MapSubscriber.Subscriber.complete (Subscriber.js:122) 
    at EmptyObservable._subscribe (EmptyObservable.js:83) 
    at EmptyObservable.Observable._trySubscribe (Observable.js:172) 
    at EmptyObservable.Observable.subscribe (Observable.js:160) 
    at new EmptyError (EmptyError.js:28) 
    at FirstSubscriber._complete (first.js:154) 
    at FirstSubscriber.Subscriber.complete (Subscriber.js:122) 
    at MergeMapSubscriber._complete (mergeMap.js:150) 
    at MergeMapSubscriber.Subscriber.complete (Subscriber.js:122) 
    at MapSubscriber.Subscriber._complete (Subscriber.js:140) 
    at MapSubscriber.Subscriber.complete (Subscriber.js:122) 
    at EmptyObservable._subscribe (EmptyObservable.js:83) 
    at EmptyObservable.Observable._trySubscribe (Observable.js:172) 
    at EmptyObservable.Observable.subscribe (Observable.js:160) 
    at resolvePromise (zone.js:824) 
    at resolvePromise (zone.js:795) 
    at eval (zone.js:873) 
    at ZoneDelegate.invokeTask (zone.js:425) 
    at Object.onInvokeTask (core.js:4621) 
    at ZoneDelegate.invokeTask (zone.js:424) 
    at Zone.runTask (zone.js:192) 
    at drainMicroTaskQueue (zone.js:602) 
    at ZoneTask.invokeTask [as invoke] (zone.js:503) 
    at invokeTask (zone.js:1540) 

उत्तर

24

मुझे कोणीय बनाम 4.4.6 के साथ एक ही त्रुटि का सामना करना पड़ा। त्रुटि को हल करने के लिए मुझे दो वैकल्पिक समाधान मिले। प्रत्येक मार्ग परिभाषा के लिए pathMatch: 'full' जोड़ रहा था। दूसरा v5.5.3 से नीचे rxjs downgrading था। यदि कोई आपके लिए काम नहीं करता है तो शायद दूसरा इच्छा है।

अद्यतन: ऐसा लगता है कि समस्या rxjs v5.5.5 में तय की गई है। एंगुलर 5.0.5 का उपयोग कर एक प्रोजेक्ट में, rxjs को v5.5.5 में अपग्रेड करने के बाद त्रुटि हो रही है।

+0

यह मेरे लिए काम करता है। धन्यवाद इवान, पोस्ट करने के लिए धन्यवाद !! – bevada

+3

धन्यवाद ... "आरएक्सजेएस" का आदान-प्रदान: "^ 5.1.0" से "आरएक्सजेएस": "5.5.2" अब काम कर रहा है – prash

+0

पथ जोड़ना: 'पूर्ण' मेरे लिए भी काम करता है! –

15

कोणीय नवीनतम संस्करण बग। सभी मार्गों पर pathMatch: 'full' जोड़ें।

{ 
    path: '', 
    component: HomeComponent, 
    pathMatch: 'full' 
    }, 
    { 
    path: 'about', 
    component: AboutComponent, 
    pathMatch: 'full' 
    }, 
+0

क्या आप एक संस्करण संख्या और स्रोत जोड़ सकते हैं? – Mick

+0

मेरे पास केवल एक मार्ग विफल रहा था - इसलिए मैंने केवल पथ को जोड़ने की कोशिश की: केवल उस मार्ग पर 'पूर्ण' - काम नहीं किया। वास्तव में इसे हर मार्ग में जोड़ने की जरूरत है। –

1

मुझे कोणीय 5.0.1 और आरएक्सजेएस 5.5.3 के साथ एक ही त्रुटि का सामना करना पड़ा। जब हमने रूट सरणी में ऑर्डर बदल दिया तो हमें अपवाद का सामना नहीं हुआ। आपके उदाहरण के लिए तो:

const appRoutes: Routes = [ 
    { path: '',     redirectTo: '/recipes', pathMatch: 'full'}, 
    { path: 'recipes/:recipeName', component: RecipesComponent}, 
    { path: 'recipes',    component: RecipesComponent}, 
]; 

सामान्य पथ (recipes) से पहले और अधिक विस्तृत पथ (recipes/:recipeName) लाना।

संबंधित मुद्दे