feat(menu): allow to lazy-load sub header components mapping

re #6
orchestratora · Apr 6, 2019 · cccb291 · cccb291
1 parent 42bc135
commit cccb291
Show file tree

Hide file tree

Showing 16 changed files with 504 additions and 132 deletions.
diff --git a/projects/demo/src/app/app-routing.module.ts b/projects/demo/src/app/app-routing.module.ts
@@ -10,7 +10,7 @@ const routes: RoutesWithMenu = [
   {
     path: '',
     component: PrintPathComponent,
-    data: { menu: { label: 'Home' } }
+    data: { menu: { label: 'Home' } },
   },
   {
     path: 'path2',
@@ -20,7 +20,7 @@ const routes: RoutesWithMenu = [
       {
         path: 'path4',
         component: PrintPathComponent,
-        data: { menu: { label: 'Section 4' } }
+        data: { menu: { label: 'Section 4' } },
       },
       {
         path: 'path5',
@@ -30,11 +30,11 @@ const routes: RoutesWithMenu = [
           {
             path: 'path8',
             component: PrintPathComponent,
-            data: { menu: { label: 'Section 8' } }
-          }
-        ]
-      }
-    ]
+            data: { menu: { label: 'Section 8' } },
+          },
+        ],
+      },
+    ],
   },
   {
     path: 'path3',
@@ -43,8 +43,8 @@ const routes: RoutesWithMenu = [
       menu: {
         label: 'Section 3',
         showChildrenIfActivated: true,
-        subMenuComponent: 'SubMenuForSection3'
-      }
+        subMenuComponent: 'SubMenuForSection3',
+      },
     },
     children: [
       {
@@ -53,45 +53,50 @@ const routes: RoutesWithMenu = [
           {
             path: 'path6',
             component: PrintPathComponent,
-            data: { menu: { label: 'Section 6' } }
+            data: { menu: { label: 'Section 6' } },
           },
           {
             path: 'path7',
             component: PrintPathComponent,
-            data: { menu: { label: 'Section 7' } }
-          }
-        ]
-      }
-    ]
+            data: { menu: { label: 'Section 7' } },
+          },
+        ],
+      },
+    ],
   },
   {
     path: 'path4',
     children: [
       {
         path: 'path1',
         component: PrintPathComponent,
-        data: { menu: { label: 'Section 4.1' } }
+        data: { menu: { label: 'Section 4.1' } },
       },
       {
         path: 'path2',
         component: PrintPathComponent,
-        data: { menu: { label: 'Section 4.2' } }
-      }
-    ]
+        data: { menu: { label: 'Section 4.2' } },
+      },
+    ],
   },
   {
     path: 'feature1',
     // component: PrintPathComponent,
     loadChildren: './feature1/feature1.module#Feature1Module',
-    data: { menu: { label: 'Feature1' } }
-  }
+    data: {
+      menu: {
+        label: 'Feature1',
+        subMenuComponent: 'Feature1Component',
+      },
+    },
+  },
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],
   providers: [
-    DynamicMenuModule.provideSubMenu('SubMenuForSection3', Path3Component)
-  ]
+    ...DynamicMenuModule.provideSubMenu('SubMenuForSection3', Path3Component),
+  ],
 })
 export class AppRoutingModule {}
diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts
@@ -5,31 +5,35 @@ import { DynamicMenuService } from 'projects/dynamic-menu/src/public_api';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit {
   constructor(private dynamicMenuService: DynamicMenuService) {}
 
   ngOnInit(): void {
     this.dynamicMenuService.addMenuAfter(['path3', ':id', 'path6'], {
       path: 'custom-path',
-      data: { menu: { label: 'Custom Section' } }
+      data: { menu: { label: 'Custom Section' } },
     });
     this.dynamicMenuService.addMenuToStart(['path3', ':id', 'path6'], {
       path: 'custom-path2',
-      data: { menu: { label: 'Custom Section - Start' } }
+      data: { menu: { label: 'Custom Section - Start' } },
     });
     this.dynamicMenuService.addMenuToEnd(['path3', ':id', 'path6'], {
       path: 'custom-path3',
-      data: { menu: { label: 'Custom Section - End' } }
+      data: { menu: { label: 'Custom Section - End' } },
     });
     this.dynamicMenuService.addMenuToStart([''], {
       path: 'custom-path-start',
-      data: { menu: { label: 'Custom Section - Start' } }
+      data: { menu: { label: 'Custom Section - Start' } },
+    });
+    this.dynamicMenuService.addMenuAfter([''], {
+      path: 'custom-path-after',
+      data: { menu: { label: 'Custom Section - After' } },
     });
     this.dynamicMenuService.addMenuToEnd([''], {
       path: 'custom-path-end',
-      data: { menu: { label: 'Custom Section - End' } }
+      data: { menu: { label: 'Custom Section - End' } },
     });
   }
 }
diff --git a/projects/demo/src/app/feature1/feature1.module.ts b/projects/demo/src/app/feature1/feature1.module.ts
@@ -2,18 +2,22 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { RoutesWithMenu } from 'projects/dynamic-menu/src/lib/types';
+import { DynamicMenuModule } from 'projects/dynamic-menu/src/public_api';
 
 import { Feature1Component } from './feature1.component';
 
 const routes: RoutesWithMenu = [
   {
     path: '',
-    component: Feature1Component
-  }
+    component: Feature1Component,
+  },
 ];
 
 @NgModule({
-  imports: [CommonModule, RouterModule.forChild(routes)],
-  declarations: [Feature1Component]
+  imports: [CommonModule, RouterModule.forChild(routes), DynamicMenuModule],
+  declarations: [Feature1Component],
+  providers: [
+    ...DynamicMenuModule.provideSubMenu('Feature1Component', Feature1Component),
+  ],
 })
 export class Feature1Module {}
diff --git a/projects/dynamic-menu/src/lib/dynamic-menu.module.ts b/projects/dynamic-menu/src/lib/dynamic-menu.module.ts
@@ -1,25 +1,28 @@
 import { CommonModule } from '@angular/common';
 import {
   ANALYZE_FOR_ENTRY_COMPONENTS,
+  Inject,
   ModuleWithProviders,
   NgModule,
+  Optional,
   Provider,
-  Type
+  Type,
 } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { DynamicMenuComponentModule } from './dynamic-menu/dynamic-menu.module';
 import {
   DynamicMenuExtras,
-  provideDynamicMenuExtras
+  provideDynamicMenuExtras,
 } from './dynamic-menu-extras';
 import { provideDynamicMenuRoutes } from './dynamic-menu-routes';
+import { DynamicMenuComponentModule } from './dynamic-menu/dynamic-menu.module';
+import { LAZY_TOKENS, LazyToken } from './lazy-token';
 import { provideSubMenuMap } from './sub-menu-map-provider';
 import { RoutesWithMenu } from './types';
 
 @NgModule({
   imports: [CommonModule, RouterModule, DynamicMenuComponentModule],
-  exports: [DynamicMenuComponentModule]
+  exports: [DynamicMenuComponentModule],
 })
 export class DynamicMenuModule {
   /**
@@ -30,8 +33,8 @@ export class DynamicMenuModule {
       ngModule: DynamicMenuModule,
       providers: [
         provideDynamicMenuExtras({ listenForConfigChanges: true, ...extras }),
-        provideDynamicMenuRoutes([])
-      ]
+        provideDynamicMenuRoutes([]),
+      ],
     };
   }
 
@@ -44,14 +47,14 @@ export class DynamicMenuModule {
    */
   static withRoutes(
     routes: RoutesWithMenu,
-    extras?: DynamicMenuExtras
+    extras?: DynamicMenuExtras,
   ): ModuleWithProviders {
     return {
       ngModule: DynamicMenuModule,
       providers: [
         provideDynamicMenuExtras(extras),
-        provideDynamicMenuRoutes(routes)
-      ]
+        provideDynamicMenuRoutes(routes),
+      ],
     };
   }
 
@@ -66,9 +69,13 @@ export class DynamicMenuModule {
       {
         provide: ANALYZE_FOR_ENTRY_COMPONENTS,
         useValue: component,
-        multi: true
+        multi: true,
       },
-      ...provideSubMenuMap(name, component)
+      ...provideSubMenuMap(name, component),
     ];
   }
+
+  constructor(@Inject(LAZY_TOKENS) @Optional() lazyTokens: LazyToken<any>[]) {
+    console.log('lazy tokens', lazyTokens);
+  }
 }