2016-12-07 13 views
6

मेरे पास मुख्य मॉड्यूल और कुछ सबोड्यूल हैं। और मैं उनके बीच कुछ मामूली रूटिंग निर्दिष्ट नहीं करना चाहता हूं।कोणीय 2 रूटिंग: रूटिंग के साथ आयात सबमिशन + इसे प्रीफिक्स्ड बनाना

मैं सबमिशन के भीतर एक सबमिशन के मार्गों को परिभाषित करना पसंद करूंगा। उदा .:

@NgModule({ 
    imports: [ 
     /*...*/ 
     RouterModule.forChild([ 
      { path: 'country', redirectTo: 'country/list' }, 
      { path: 'country/list', component: CountryListComponent }, 
      { path: 'country/create', component: CountryCreateComponent }, 
      /*...*/ 
     ]) 
    ], 
    declarations: [/*...*/], 
    exports: [ 
     RouterModule, 
    ], 
}) 
export class CountryModule {} 

मैं अपने स्वयं के आंतरिक मार्ग के साथ इस मॉड्यूल आयात करना चाहते हैं, लेकिन मैं अपने पूरे मार्ग पहले से जुड़ा हुआ बनाना चाहते हैं।

const appRoutes = [ 
    { path: '', component: HomeComponent }, 
    /*... (basic routes)*/ 
]; 

@NgModule({ 
    imports: [ 
     /*...*/ 
     RouterModule.forRoot(appRoutes), 
     CountryModule, // <- how to make its routing prefixed?? 
    ], 
    declarations: [ 
     /*...*/ 
     AppComponent, 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule {} 

यह सेटिंग निम्न मार्गों बनाता है: /country, /country/list, आदि, लेकिन मैं उन्हें इस तरह पहले से जुड़ा हुआ बनाना चाहते:

  • /settings/country
  • /settings/country/list
  • /settings/country/create

अन्य modu हैं लेस जो मैं किसी अन्य रूटिंग के माध्यम से एक्सेस करना चाहता हूं, उदा। CityModule/otherstuff/city/create और/अन्य स्टफ/शहर/सूची` के तहत।

मेरे सवालों का:

  1. यह अपने आप ही मार्ग के साथ एक मॉड्यूल आयात और उसके मार्गों पहले से जुड़ा हुआ बनाने के लिए संभव है?
  2. इसके अलावा: क्या उनके अंतिम (उपसर्ग) मार्गों के अज्ञात रूप से 2 submodules के बीच संबंध बनाने का कोई तरीका है?

अद्यतन

स्वीकार किए जाते हैं जवाब यह करने के लिए सबसे अच्छा तरीका है: मॉड्यूल में रूट बनाने, उन्हें बाहर रजिस्टर। इस प्रकार आप मार्गों को संशोधित कर सकते हैं, उदा। उन्हें उपसर्ग (यह है कि मैं क्या चाहता था), तो आप गार्ड परिभाषित कर सकते हैं, ओवरराइड या उन्हें फ़िल्टर, आदि

+1

क्षमा करें। यहां सवाल है: http://stackoverflow.com/questions/39131350/nesting-angular2-rc5-routes-multiple-files –

उत्तर

5
अपने appRoutes में

तरह

const appRoutes = [ 
    { path: '', component: HomeComponent }, 
    { 
    path: 'settings', 
    component: CountryComponent, 
    canActivate: [AuthGuard], 
    children: COUNTRY_ROUTES 
    }, 
]; 

एक अलग मार्गों फ़ाइल बनाने

export const COUNTRY_ROUTES:Routes = [ 
    { path: 'country', redirectTo: 'country/list' }, 
    { path: 'country/list', component: CountryListComponent }, 
    { path: 'country/create', component: CountryCreateComponent }, 

]; 
बच्चे रूट जोड़ें

CountryComponent.html

<router-outlet></router-outlet> 
+0

बस स्पष्ट करने के लिए: मॉड्यूल में आयात होने के बाद मॉड्यूल के रूटिंग को बदलने का कोई तरीका नहीं है ? –

+0

@ गैबर इमरे, आप नहीं कर सकते। –

5

में इस रूटिंग सामान के साथ खेलना मैं सिर्फ पाया बिना किसी सिरदर्द और प्यार कोणीय के साथ submodules के मार्गों को संभालने के लिए, मैं एक साफ तरीका साझा करना चाहता हूं।ओपी केस को एक उदाहरण के रूप में लेते हुए, मैं आपको निम्नलिखित कोड का अध्ययन करने का प्रस्ताव करता हूं:

राउटर से गतिशील रूप से लोड करने के लिए अपने CountryModule सबमिशन में एक उपयोगिता फ़ंक्शन जोड़ें और संदर्भ के साथ तीर फ़ंक्शन को बदलने के बारे में एक कंपाइलर चेतावनी से बचें एक निर्यात समारोह के लिए:

@NgModule({ 
    imports: [ 
    ... 
    RouterModule.forChild([ 
     { path: 'country', pathMatch: 'full', redirectTo: 'list' }, 
     { path: 'country/list', component: CountryListComponent }, 
     { path: 'country/create', component: CountryCreateComponent }, 
    ]) 
    ], 
    declarations: [ ... ], 
    exports: [ 
    RouterModule, 
    ], 
}) 
export class CountryModule {} 

export function CountryEntrypoint() { 
    return CountryModule; 
} 

अब आप आयात कर सकते हैं कि Entrypoint अपने माता पिता के मॉड्यूल में आप मार्गों को रखना चाहते हैं जहां:

@NgModule({ 
    imports: [ 
    ... 
    RouterModule.forRoot([ 
     { path: '', pathMatch: 'full', component: HomeComponent }, 
     { path: 'settings', loadChildren: CountryEntrypoint } 
    ]), 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

और वहाँ तुम जाओ! अब आप settings/country/list और settings/country/list के साथ अपने सबमिशन घटकों तक पहुंच सकते हैं।

चेतावनी

, करने के लिए अपने माता-पिता मॉड्यूल के @NgModule में CountryModule आयात नहीं सावधान रहें, क्योंकि यह settings पथ के बाहर मार्गों पर आ जाएगी। राउटर नौकरी करने दें।

का आनंद लें!

+0

यह स्वीकार्य उत्तर होना चाहिए। ध्यान दें कि आपको "एंट्रीपॉइंट" निर्यात करने की आवश्यकता नहीं है, आप केवल 'loadChildren:() => CountryModule' कर सकते हैं। –

+0

@MichaelPetito हम कर सकते थे, लेकिन कोणीय/क्ली के साथ एक त्रुटि/चेतावनी है जो लैम्बडास का उपयोग करने के बारे में शिकायत करती है और उन्हें निर्यात किए गए कार्यों के साथ बदलने का सुझाव देती है;) –

+1

शायद आपको अधिक चेतावनी देना चाहिए, आपकी चेतावनी 'पैरेंट मॉड्यूल में आयात न करें'। आपने मुझे अपने सिर को खरोंचने और मंडलियों में घूमने से बचाया। – fossil

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