मैं नीचे के रूप में एक संरचना बनाने की योजना बना रहा हूं (प्रत्येक रूटिंग में मार्ग मेरे विचार को स्पष्ट करने के लिए है)

app.module.ts
app.routing.ts  // Routes = [{ path: 'modA', module: moduleA }, { path: 'modB', module: moduleB }]
moduleA
  -- moduleA.module.ts
  -- moduleA.routing.ts  // Routes = [{ path: '', component: ListComponent }, { path: 'new', component: CreateComponent }]
  -- list.component.ts
  -- create.component.ts
moduleB
  -- moduleB.module.ts
  -- moduleB.routing.ts  // Routes = [{ path: 'a', component: AbcComponent }, { path: 'z', component: XyzComponent }]
  -- abc.component.ts
  -- xyz.component.ts

मैं मॉड्यूलए में जो कुछ भी समूह करना चाहता हूं, बस मॉड्यूलए.मॉड्यूल में इसकी रूटिंग सहित। मॉड्यूल बी के समान।

फिर मैं अपने मॉड्यूल पथ को पंजीकृत करने के लिए मॉड्यूलए और मॉड्यूलबी को ऐप.रूटिंग में बेनकाब करना चाहता हूं। मुझे आशा है:

/modA           show list component in moduleA
/modA/new       show create component in moduleA
/modB/a         show abc component in moduleB
/mobB/z         show xyz component in moduleB

मैं Angular4 में उपरोक्त संरचना कैसे बना सकता हूं? यदि संभव हो तो कृपया वही व्यावहारिक कोड प्रदान करें।

0
Simon 3 अक्टूबर 2017, 18:27

2 जवाब

सबसे बढ़िया उत्तर

मैं सुझाव दूंगा कि चूंकि आप पहले से ही सापेक्ष टुकड़ों को मॉड्यूल में तोड़ रहे हैं, इसलिए आप आलसी लोडिंग का उपयोग करते हैं जिससे आपके ऐप में प्रदर्शन में वृद्धि होगी। लेज़िंग लोडिंग का उपयोग करके आपको वह कार्यक्षमता मिलेगी जो आप बॉक्स से बाहर चाहते हैं। प्रत्येक मॉड्यूल अपने सापेक्ष अपने रूटिंग को परिभाषित करेगा और मॉड्यूल को app.routing फ़ाइल में निर्दिष्ट बेस रूट से परोसा जाएगा।

App.routing.ts

RouterModule.forRoot([{
    path: 'modA',
    loadChildren: './moduleA/moduleA.module#ModuleA'
}, {
    path: 'modB',
    loadChildren: './moduleB/moduleB.module#ModuleB'
}]

मॉड्यूलए.रूटिंग.ts

RouterModule.forChild([{
    path: '',
    component: ListComponent 
}, {
    path: 'new',
    component: CreateComponent
}]

मॉड्यूलबी.रूटिंग.ts

RouterModule.forChild([{
    path: 'a',
    component: AbcComponent 
}, {
    path: 'z',
    component: XyzComponent
}]
1
Teddy Sterne 3 अक्टूबर 2017, 18:48

आपको बाल मार्गों का उपयोग करने की आवश्यकता है। /new इस तरह /modA का बच्चा होगा:

Routes = [{ path: 'modA', component: AComponent,
              children: [
                { path: 'new', component: childComponent }
                 ] 
          },
          { path: 'modB', component: BComponent }
         ]
0
SBKDeveloper 3 अक्टूबर 2017, 18:34