angular - कैसे एक मॉड्यूल के एक बच्चे के रूप में एक मॉड्यूल के लिए मार्ग-कोणीय 2 आरसी 5




angular2-routing angular2-modules (5)

मैं एक ऐसे एप्लिकेशन को अपग्रेड करने की प्रक्रिया में हूं जो मैं नवीनतम एंगुलर 2 रिलीज के उम्मीदवार पर काम कर रहा हूं। इस काम के हिस्से के रूप में मैं NgModule कल्पना का उपयोग करने का प्रयास कर रहा हूं और अपने आवेदन के सभी हिस्सों को मॉड्यूल में स्थानांतरित कर रहा हूं। अधिकांश भाग के लिए, यह रूटिंग के साथ किसी समस्या के अपवाद के साथ बहुत अच्छी तरह से चला गया है।

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",

मेरा ऐप मॉड्यूल की एक रचना के रूप में बनाया गया है, जिसमें कई मॉड्यूल एक मूल मॉड्यूल के बच्चों के रूप में एक साथ चिपके हुए हैं। उदाहरण के लिए, मेरे पास एक व्यवस्थापक मॉड्यूल है जिसमें एक सूचना मॉड्यूल, एक उपयोगकर्ता मॉड्यूल और एक टेलिफोनी मॉड्यूल (उदाहरण के लिए) शामिल हैं। इन मॉड्यूल के मार्गों की तरह दिखना चाहिए ...

/admin/notifications/my-notifications
/admin/users/new-user
/admin/telephony/whatever

राउटर के पहले रिलीज में, "बच्चों" का उपयोग करना आसान था

export const AdminRoutes: RouterConfig = [
   {
      path: "Admin",
      component: AdminComponent,
      Children: [
         ...UserRoutes,
         ...TelephonyRoutes,
         ...NotificationRoutes
      ]
   }
]

एक अन्य फ़ाइल में, उप-मॉड्यूल के भाग के रूप में, मैं अलग-अलग मॉड्यूल मार्गों को भी परिभाषित करूँगा

export const UserRoutes: RouterConfig = [
    {
       path: "users",
       component: userComponent,
       children: [
           {path: "new-user", component: newUserComponent}
       ]
    }

]

यह सब बहुत अच्छा काम किया। मॉड्यूल में अपग्रेड करने की प्रक्रिया में, मैंने सब कुछ अपनी व्यक्तिगत रूटिंग फाइलों में स्थानांतरित कर दिया, इसलिए अब ये दोनों इस तरह दिखते हैं

const AdminRoutes: Routes = [
    {path: "admin", component: AdminComponent}
] 

export const adminRouting = RouterModule.forChild(AdminRoutes)

तथा

const UserRoutes: Routes = [
       path: "users",
       component: userComponent,
       children: [
           {path: "new-user", component: newUserComponent}
       ]
] 

export const userRouting = RouterModule.forChild(UserRoutes)

उस सब के साथ, मेरे पास एक UsersModule है जो userRout को आयात करता है, और फिर एक AdminModule जो AdminRoutes और UsersModule को आयात करता है। मेरा विचार था कि चूंकि UsersModule AdminModule का एक बच्चा है, इसलिए रूटिंग उस तरह से काम करेगी जैसे वह करती थी। दुर्भाग्य से, ऐसा नहीं है कि मैं एक उपयोगकर्ता मार्ग के साथ समाप्त होता हूं जो बस है

/users/new-user 

के बजाय

/admin/users/new-user

इसके अलावा, इस वजह से, नए-उपयोगकर्ता घटक को मेरे व्यवस्थापक घटक के राउटर आउटलेट में लोड नहीं किया जाता है जो मेरे आवेदन की स्टाइलिंग और नेविगेशन को फेंक देता है।

मैं अपने जीवन के लिए नहीं आ सकता है कि मैं अपने AdminModule के बच्चों के रूप में अपने UserModule के मार्गों का संदर्भ कैसे दूं। मैंने इसे पुराने तरीके से करने की कोशिश की है और दो मॉड्यूल में होने वाले मार्गों के बारे में त्रुटियां प्राप्त करता हूं। जाहिर है कि यह नया जारी होने के बाद, इन मामलों में से कुछ के आसपास प्रलेखन थोड़ा सीमित है।

किसी को भी मदद प्रदान कर सकते हैं बहुत सराहना की जाएगी!


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

export const childRoutes: Routes = [
  {
    path: 'someChild',
      component: SomeChildComponent,
      children: [
        { path: '', component: SomeChildSubComponent1 },
        { path: 'comp1', component: SomeChildSubComponent1 },
        { path: 'comp2', component: SomeChildSubComponent2 }
      ]
  }
];

इससे आपके पास एक url होगा जैसे / someParent / someChild / comp1 - और घटक उनके संबंधित राउटर-आउटलेट में प्रदर्शित होते हैं। कृपया ध्यान दें: आप खाली पथ के लिए एक घटक को डीले करने के लिए है। अन्यथा आप बच्चों को नेविगेट करने में सक्षम नहीं हैं।


ठीक है, सप्ताहांत के बेहतर हिस्से के लिए इसके साथ घूमने के बाद मैंने इसे अपने अंत में चला दिया। मेरे लिए अंत में क्या काम करना था:

  • आपके द्वारा Routes किए जाने वाले प्रत्येक मॉड्यूल के लिए सभी Routes निर्यात करें। बाल मॉड्यूल में किसी भी RouterModule.forChild() को आयात न करें।
  • Childs मॉड्यूल परिभाषा में childs मार्ग परिभाषाओं से दिखाई देने वाले प्रत्येक घटक को निर्यात करें।
  • आयात (अर्थ टाइपस्क्रिप्ट import कीवर्ड) सभी बाल मार्गों को हमेशा की तरह और सही पथ के तहत इन्हें शामिल करने के लिए ... ऑपरेटर का उपयोग करें। मैं इसे रास्ते को परिभाषित करने वाले चाइल्ड-मॉड्यूल के साथ काम करने के लिए नहीं कर सकता था, लेकिन माता-पिता के पास होने पर यह ठीक काम करता है (और यह लगातार चलने योग्य है)।

मेरे मामले में इस तरह एक पदानुक्रम में मेरे तीन स्तर थे:

  • रूट ( / )
    • संपादक ( editor/:projectId )
      • क्वेरी ( query/:queryId )
      • पृष्ठ ( page/:pageId )
    • सामने (के about )

निम्नलिखित परिभाषाएँ मेरे लिए /editor/:projectId/query/:queryId पथ के लिए काम करती हैं:

// app.routes.ts
import {editorRoutes}                   from './editor/editor.routes'

// Relevant excerpt how to load those routes, notice that the "editor/:projectId"
// part is defined on the parent
{
    path: '',
    children: [
        {
            path: 'editor/:projectId',
            children: [...editorRoutes]
            //loadChildren: '/app/editor/editor.module'
        },
    ]
}

संपादक मार्ग इस तरह दिखते हैं:

// app/editor/editor.routes.ts
import {queryEditorRoutes}              from './query/query-editor.routes'
import {pageEditorRoutes}               from './page/page-editor.routes'

{
    path: "", // Path is defined in parent
    component : EditorComponent,
    children : [
        {
            path: 'query',
            children: [...queryEditorRoutes]
            //loadChildren: '/app/editor/query/query-editor.module'
        },
        {
            path: 'page',
            children: [...pageEditorRoutes]
            //loadChildren: '/app/editor/page/page-editor.module'
        }
    ]
}

और QueryEditor के लिए अंतिम भाग इस तरह दिखता है:

// app/editor/query/query-editor.routes.ts
{
    path: "",
    component : QueryEditorHostComponent,
    children : [
        { path: 'create', component : QueryCreateComponent },
        { path: ':queryId', component : QueryEditorComponent }
    ]
}

हालाँकि, इस कार्य को करने के लिए, सामान्य Editor को QueryEditor को आयात और निर्यात करने की आवश्यकता QueryCreateComponent और QueryEditorComponent को QueryCreateComponent और QueryEditorComponent को निर्यात करने की आवश्यकता QueryEditorComponent क्योंकि ये आयात के साथ दिखाई देते हैं। ऐसा करने में विफल होने पर आपको Component XYZ is defined in multiple modules की तर्ज पर त्रुटियाँ मिलेंगी।

ध्यान दें कि आलसी लोडिंग भी इस सेटअप के साथ ठीक काम करती है, उस स्थिति में बच्चे के मार्गों को निश्चित रूप से आयात नहीं किया जाना चाहिए।


मुझे भी यही समस्या थी।

लोडचिल्ड्रन के उपयोग से यहाँ उत्तर बहुत अच्छा है:

          {
             path: 'mypath',
             loadChildren : () => myModule
          }

https://github.com/angular/angular/issues/10958


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

मेरे दृष्टिकोण को समझने की कुंजी यह है कि सभी मार्गों, चाहे मॉड्यूल में कितनी गहराई से नेस्टेड हो, रूट मॉड्यूल में जोड़ा जाता है। त्वरित उदाहरण, मान लें कि हमारे पास एक DepartmentModule और एक EmployeeModule जिसे हम इस URL का उपयोग करके नेविगेट करना चाहते हैं

/department/1/employee/2

किस बिंदु पर हम कर्मचारी 2 का विवरण देखेंगे। department में department.routing.ts लिए मार्गों को कॉन्फ़िगर करना। employee में employee.routing.ts और employeedepartment.routing.ts और employee , हमारे इच्छित तरीके से काम नहीं करेंगे और आप देखेंगे कि आप नेविगेट कर सकते हैं

/employee/2

जड़ घटक से, जबकि

/department/1/employee/2

दुर्घटना होगी (मार्ग नहीं मिला)। इस परिदृश्य में एक विशिष्ट मार्ग कॉन्फ़िगरेशन इस तरह दिखेगा:

export const departmentRoutes: Routes = [
    { path: 'department', component: DepartmentComponent, children: [
        { path: '', component: DepartmentsComponent },
        { path: ':id', component: DepartmentDetailsComponent }
    ]}
];

export const employeeRoutes: Routes = [
    { path: 'employee', component: EmployeeComponent, children: [
        { path: '', component: EmployeesComponent },
        { path: ':id', component: EmployeeDetailsComponent }
    ]}
];

और EmployeeModule DepartmentModule द्वारा आयात किया जाएगा। अब, जैसा मैंने कहा, यह दुर्भाग्य से काम नहीं करता है।

हालाँकि, केवल एक परिवर्तन के साथ यह होगा:

export const employeeRoutes: Routes = [
    { path: 'department/:id/employee', component: EmployeeComponent, children: [
        { path: '', component: EmployeesComponent },
        { path: ':id', component: EmployeeDetailsComponent }
    ]}
];

पकड़ यह है, कि जब आप किसी employee URL पर जाते हैं, तो DepartmentModule सक्रिय भाग नहीं ले रहा है, लेकिन फिर भी आप ActivatedRoute पैरामीटर से हर पैरामीटर तक पहुँच सकते हैं:

export class EmployeeDetailsComponent {
    departmentId: number;
    employeeId: number;
    constructor(route: ActivatedRoute) {
        route.parent.params.subscribe(params =>
            this.departmentId= +params['id'])
        route.params.subscribe(params => 
            this.employeeId= +params['id']);
    }
}

मुझे आश्चर्य है कि अगर यह आधिकारिक दृष्टिकोण माना जाता है, लेकिन अब मेरे लिए यह काम करता है जब तक कि कोणीय 2 टीम से अगला ब्रेकिंग परिवर्तन नहीं हो जाता।


loadChildren उपयोग करें। ठीक है। लेकिन जब आप बिल्ड प्रक्रिया को पुनरारंभ करते हैं, तो आपको बिल्ड त्रुटि मिलेगी। आपको loadChildren किए गए प्रतीक को loadChildren से मेल खाना चाहिए।

import { ChildModule } from './child/child.module';

export function childRouteFactory() {
  return ChildModule;
}

...
  {
    path: 'child',
    loadChildren: childRouteFactory
  }
...




angular2-router3