कोणीय 2 राउटर कॉन्फ़िगरेशन, उपसर्ग पथमैच काम नहीं करता

Question

जो मैं एंगुलर 2 राउटर प्रलेखन से समझता हूं, मार्ग कॉन्फ़िगर डिफ़ॉल्ट पथ मैच रणनीति "उपसर्ग" है, "उपसर्ग" पथ मैच रणनीति का अर्थ है कि ऐप राउटर को केवल शुरुआत को देखना होगा यूआरएल के और उचित मार्ग के साथ मैच।

संदर्भ: https://angular.io/docs/js/latest/api/router/index/Routes-type-alias.html#!#matching-strategy

, कहा गया है कि नीचे विन्यास के साथ मैं ग्रहण करेंगे अगर मैं /abcdefg पर नेविगेट है कि इस मार्ग लोड करना चाहिए।

एक समस्या यह है कि इस काम नहीं कर रहा, यकीन है कि क्या गलत है और मैं नहीं कर सकते गूगल पर या @angular/router स्रोत कोड में इस बारे में ज्यादा जानकारी नहीं मिल रहा हूँ।

आपकी मदद के लिए धन्यवाद।

const ROUTES: Routes = [ 
    { path: '', component: MainLayoutComponent, pathMatch: 'prefix', canActivate: [AuthGuard], children: [ 
    { path:'abc', pathMatch: 'prefix', component: ExampleComponent}, 
    { path: '', component: HomepageComponent } 
    ]}, 
]; 


export const ROUTING = RouterModule.forRoot(ROUTES, { useHash: false }); 

अद्यतन # 1, कोशिश कर रहा गुंटर Zöchbauer सुझाव।

नई रूटर विन्यास हैं:

अब

/abc/defg काम करता है लेकिन नहीं /abcdefg

{ path:'abc', pathMatch: 'prefix', 
    children: [ 
    { path:'**', component:ExampleComponent}, 
    ] 
} 

Answer 1

तो, किसी ने मुझसे पूछ रहा था मैं इस समस्या को हल,

पहले मैं एक वापस आने के रूप में एक नया मार्ग में अन्य सभी मार्गों के लिए कुछ इस तरह कहा, राउटर नेविगेशन एंड इवेंट पर यूआरएल के आधार पर लोड करने के लिए कौन सा मॉड्यूल लोड करना है।

<template [ngIf]="viewData && viewData['component'] == 'profile'"> 
    <user-profile 
    [title] = "viewData['view']" 
    [username] = "viewData['username']" 
    ></user-profile> 
</template> 

भी है कि उल्लेख करने के लिए लायक:

मेरे मामले में

, अगर यूआरएल/@ somestring था, मैं profileComponent लोड और कुछ APIs

ngOnInit() { 
    this.router.events.filter(event => event instanceof NavigationEnd) 
     .subscribe((event) => { 
     this.parseUrl(this.router.url); 
     }); 
    } 

    parseUrl(url: string) { 
    let data = {}; 
    let parts: string[] = url.split('/'); 
    parts = parts.filter((item) => !!item); 
    if (parts[0] && parts[0].indexOf('@') === 0) { 
     data['component'] = 'profile'; 
     data['username'] = parts[0].replace('@', ''); 
    } 
    this.viewData = data; 
    } 

और टेम्पलेट में कॉल करने के लिए चाहता था हमें url में विशेष वर्णों (@) के लिए ऑटो एन्कोडिंग अक्षम करने के लिए DefaultUrlSerializer.serialize को ओवरराइड करना पड़ा।

Answer 2

है कि अगर आपके path: 'abc' मार्ग path: 'defg' या path: '**' या path: 'de' के साथ एक बच्चे मार्ग था और बच्चे मार्ग एक था काम करेगा path: 'fg' के साथ मार्ग।

pathMatch: 'full' का अर्थ है कि पूरे यूआरएल पथ से मेल खाने की जरूरत है और मार्ग मिलान एल्गोरिदम द्वारा उपभोग किया जाता है।

pathMatch: 'prefix' का अर्थ है, पहला मार्ग जहां पथ यूआरएल की शुरुआत से मेल खाता है, का चयन किया जाता है, लेकिन फिर मार्ग मिलान करने वाला एल्गोरिदम लगातार बाल मार्गों के लिए खोज कर रहा है जहां शेष यूआरएल मेल खाता है।

Answer 3

समस्या तुम कह रहे हो जाता है:

{ path: '', component: MainLayoutComponent, pathMatch: 'prefix' 

जो मूल रूप से कह रही:

किसी भी यूआरएल है कि और बस पर्याप्त कुछ भी नहीं के साथ शुरू होता ('') का पता लगाएं, सभी यूआरएल हमेशा कुछ भी नहीं के साथ शुरू करते हैं।

यदि आप एक Regex चलाने के लिए और कहते हैं कि इन url करने के लिए '' से मेल खाते हैं?, हाँ क्या करता है इस यूआरएल /google

या इस यूआरएल

पर विचार करें।

जब तक आप (^) शुरू नहीं करते हैं और ($) बिट को समाप्त करना भी मेल खाना चाहिए, जो उस स्थिति में, दोनों के लिए शुरू होगा, लेकिन समाप्त होने से केवल खाली यूआरएल से मेल खाया जाएगा।

यही है कि उन्होंने full उपसर्ग बनाया है, कहने के लिए, यूआरएल बिल्कुल मेल खाना चाहिए।

{path: ':url', loadChildren: './fallback/fallback.module#FallbackModule'} 

तो fallbackComponent अंदर हम फैसला: