विभिन्न मार्ग समान घटक

Question

मैं इस /products जैसे कुछ हासिल करना चाहता हूं, सभी उत्पादों को दिखाता है और /products/:category किसी विशिष्ट श्रेणी से संबंधित सभी उत्पादों को दिखाता है। प्राप्त करने के लिए कि मैं निम्नलिखित मार्गों है:

const productsRoutes: Routes = [ 
    { 
    path: 'products', 
    component: ProductsComponent, 
    children: [ 
     { 
     path: '', 
     component: ProductsListComponent, 
     }, 
     { 
     path: ':category', 
     component: ProductsListComponent 
     } 
    ] 
    } 
]; 

समस्या

जब मैं श्रेणियों के बीच स्विच, जब मैं सभी उत्पादों और श्रेणी के उत्पादों, और उपाध्यक्ष प्रतिकूल, कोणीय redraws के बीच स्विच करने के लिए सब कुछ है, ठीक है घटकों और एक झटकेदार है।

कोणीय 2 राउटर के अंतिम संस्करण में रेगेक्स नहीं है, जैसा कि मुझे पता है। क्या ऐसा कुछ है जिसे मैं याद कर रहा हूं, या अभी यह एकमात्र समाधान है?

Answer 1

मुझे नहीं पता कि ऐसा करने का कोई और तरीका है लेकिन मैं इसे निम्नलिखित हैक का उपयोग करके काम करने में कामयाब रहा।

export const productsRoutes: Route[] = [ 
    { 
     path: 'products', 
     component: ProductsComponent, 
     children: [ 
      { 
       path: '', 
       pathMatch: 'prefix', 
       component: ProductsListComponent, 
       children: [ 
        { 
         path: '', 
         component: EmptyComponent, 
        }, 
        { 
         path: ':category', 
         component: EmptyComponent, 
        }, 
       ], 
      }, 
     ], 
    }, 
]; 

EmptyComponent:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'GemainEmpty', 
    template: '<router-outlet></router-outlet>', 
}) 
export class EmptyComponent { 
} 

ListComponent पर हैंडल मार्ग परिवर्तन:

ngOnInit() { 
    this.routerEventsSubscription = this.router.events.subscribe((evt) => { 
     if (!(evt instanceof NavigationEnd)) { 
      return; 
     } 
     //Code to reload/filter list 
    } 
} 

और ListComponent टेम्पलेट पर एक रूटर आउटलेट जोड़ें।

Answer 2

तुम भी एक विशिष्ट पथ के लिए एक रीडायरेक्ट निर्धारित कर सकते हैं:

{ path: '**', redirectTo: '/home', pathMatch: 'full' }, 

जहां /home मार्ग पर आप रीडायरेक्ट करना चाहते हैं।

path: '**' सभी रास्ते जो जोड़ने मार्गों

const routes: Routes = [ 
    { path: 'experience', 
     children: [ 
      { path: 'pending', component: ExperienceComponent }, 
      { path: 'requests', component: ExperienceComponent }, 
     ] }] 

और ExperienceComponent आयात में से

Answer 3

आप इसे हल कर सकते हैं परिभाषित नहीं हैं निराकरण

import { ActivatedRoute } from "@angular/router"; 

और निर्माता में इस पैरामीटर जोड़ने

constructor(public route: ActivatedRoute) 

और निर्माता प्राप्त यूआरएल

this.route.url.subscribe(params => { 
    console.log(params[0].path); 
})