कोणीय 2 - सबमॉड्यूल रूटिंग और नेस्टेड <राउटर-आउटलेट>

Question 1

मैं नीचे वर्णित परिदृश्य के लिए कोणीय 2 के साथ एक समाधान की तलाश कर रहा हूं:

इस परिदृश्य में, शीर्ष-नव में सबमॉड्यूल को लोड करने के लिए लिंक होते हैं और सब-नेम में सबमॉड्यूल की सामग्री को अपडेट करने के लिए लिंक होते हैं।

URL को निम्नानुसार मैप करना चाहिए:

/ home => मुख्य घटक राउटर आउटलेट में होम पेज लोड करता है
/ submodule => मुख्य घटक राउटर आउटलेट में submodule को लोड करता है और डिफ़ॉल्ट रूप से सबमॉड्यूल के होम पेज और सब नेवबार को दिखाना चाहिए
/ सबमॉड्यूल / सुविधा => सबमॉड्यूल के राउटर आउटलेट के अंदर की सुविधा को लोड करता है

ऐप मॉड्यूल (और ऐप कंपोनेंट) में अलग-अलग सबमॉड्यूल पर नेविगेट करने के लिए एक शीर्ष नावबार होता है और ऐप घटक टेम्पलेट इस तरह दिख सकता है

<top-navbar></top-navbar>
<router-outlet></router-outlet>

लेकिन यहां जटिलता है। मुझे अपने सबमॉड्यूल्स की ज़रूरत है कि एक दूसरे लेवल की नेवी बार और उनके खुद के राउटर आउटलेट के साथ एक समान लेआउट हो ताकि उनके अपने कंपोनेंट्स लोड हो सकें।

<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>

मैंने हर विकल्प की कोशिश की और हर जगह खोज की, लेकिन राउटर आउटलेट के साथ उप-मॉड्यूल में डिफ़ॉल्ट टेम्पलेट (जैसे ऐप घटक) के लिए एक समाधान नहीं मिल सका और सब-नेवी को खोए बिना इनर राउटर आउटलेट में सबमॉड्यूल की सामग्री को लोड किया। ।

मैं किसी भी इनपुट या विचारों की सराहना करता हूं

Question 2

Html पेज इस तरह दिखेगा।

मुख्य पृष्ठ

<top-navbar></top-navbar>
<router-outlet></router-outlet>

उप मॉड्यूल पेज

<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>

टॉप-नेव बार में नेविगेशन क्लिक करने पर मुख्य रूट आउटलेट क्रमशः रूट करेगा।

राउटर-आउटलेट [सब] क्रमशः रूट करेगा, सब-नेबर पर क्लिक करते समय।

HTML ठीक है, ट्रिक app.rout लिखने पर आएगी

app.rout.ts

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  { path: 'home',
    component: homeComponent,
    children: [
      {
        path: 'module1',
        component: module1Component,
        children: [
          {
            path: 'submodule11',
            component: submodule11Component,
          },
          {
            path: '',
            redirectTo: 'submodule11',
            pathMatch: 'full'
          }
        ]
      },
      {
        path: 'module2',
        component: module2omponent,
        children: [
          {
            path: 'submodule21',
            component: submodule21Component,
          },
          {
            path: '',
            redirectTo: 'submodule21',
            pathMatch: 'full'
          }
        ]
      }
    ]
  },
  {
    path: 'about',
    component: aboutComponent
  }
]

आशा है इससे आपकी मदद होगी।

अधिक जानकारी https://angular.io/guide/router

Question 3

उपयोग:

RouterModule.forChild()
...
<router-outlet name="sub"></router-outlet>
...
[routerLink]="[{ outlets: { sub: [subRouteName] } }]"

पूर्ण उदाहरण:

एचटीएमएल

<div class="tabs tinyscroll">
  <button *ngFor="let tab of tabs"
  [routerLink]="[{ outlets: { sub: [tab.name] } }]"
  routerLinkActive="selected">
    <span>{{ tab.label }}</span>
  </button>
</div>

<section>
  <router-outlet name="sub"></router-outlet>
</section>

app.module.ts

imports: [
...
    RouterModule.forChild([
      {
        path: 'registers',
        component: RegistersComponent,
        children: [
          {path: 'vehicles', component: VehiclesComponent, outlet: 'sub'},
          {path: 'drivers', component: DriversComponent, outlet: 'sub'},
          {path: 'bases', component: BasesComponent, outlet: 'sub'},
          {path: 'lines', component: LinesComponent, outlet: 'sub'},
          {path: 'users', component: UsersComponent, outlet: 'sub'},
          {path: 'config', component: ConfigComponent, outlet: 'sub'},
          {path: 'companies', component: CompaniesComponent, outlet: 'sub'}
        ],
        canActivate: [AuthGuard]
      }
    ]),
...

Question 4

आपको मार्गों में आउटलेट के नाम का उल्लेख करना है अपने राउटर आउटलेट के नाम का उल्लेख इस तरह से करें "आउटलेट: 'उप"

routes: Routes = [
  {path:'', redirectTo: 'login', pathMatch: 'full'},
  {
    path: 'login',
    component: LoginComponent,

  },
  { path: 'home',
    component: AppComponent,
      children: [
        {path: 'home/pdf',component: SideMenuPage,outlet:"sub" },
        {path:'home/addFileUp',component:SidePageAdd,outlet:"sub"},
      ]
   },
];