How to invoke same page with menu parameter #8205

1 Answer(s)

• 

  1

  TimMackey created 5 years ago

  I figured this out. I'm posting this in case someone else wants to do something like this. I've seen other posts with similar questions.

  Since the router will only load pages when the route changes (AppMenuItem.route property), the solution is to add another layer of component. The coding was pretty quick once I had a plan. The new AppMenu tree is:

      getMenu(): AppMenu {
          return new AppMenu('MainMenu', 'MainMenu', [
              new AppMenuItem('Dashboard', 'Pages.Administration.Host.Dashboard', 'flaticon-line-graph', '/app/admin/hostDashboard'),
              new AppMenuItem('Dashboard', 'Pages.Tenant.Dashboard', 'flaticon-line-graph', '/app/main/dashboard'),
              new AppMenuItem('TtmDashboard', 'Pages.User.Dashboard', 'far fa-edit', '', [
                  new AppMenuItem('All', 'Pages.User.Dashboard', 'fal fa-globe', '/app/main/ttm-page_0', [], false, { menuId: 0, menuName: 'All'}),
                  new AppMenuItem('Facilities', 'Pages.User.Dashboard', 'fal fa-school', '/app/main/ttm-page_1', [], false, { menuId: 1, menuName: 'Facilities'}),
                  new AppMenuItem('Classrooms', 'Pages.User.Dashboard', 'far fa-users-class', '/app/main/ttm-page_2', [], false, { menuId: 2, menuName: 'Classrooms'}),
                  new AppMenuItem('Academics', 'Pages.User.Dashboard', 'far fa-books', '/app/main/ttm-page_3', [], false, { menuId: 3, menuName: 'Academics'}),
                  new AppMenuItem('Students', 'Pages.User.Dashboard', 'far fa-user-friends', '/app/main/ttm-page_4', [], false, { menuId: 4, menuName: 'Students'}),
  

  I added a new component for each submenu item (route 'ttm-page_n', n = 0 - 4), with the export class name also numbered 0 to 4;

  import { Component } from '@angular/core';
  
  @Component({
      template: '<ttm-dashboard-comp></ttm-dashboard-comp>',
  })
  export class TtmPage0Component { }
  

  ...and added a selector to my dashboard component:

  @Component({
      selector: 'ttm-dashboard-comp',
      templateUrl: 'ttm-dashboard.component.html',
      styleUrls:  ['ttm-dashboard.component.less',
                   'ttm-dashboard.component.css',
                  ],
      encapsulation: ViewEncapsulation.None,
      animations: [appModuleAnimation()]
  })
  export class TtmDashboardComponent extends AppComponentBase implements OnInit, AfterViewInit {
  

  Also, add entries in the router table:

  { path: 'ttm-page_0', component: TtmPage0Component, data: { permission: 'Pages.User.Dashboard' } },
  { path: 'ttm-page_1', component: TtmPage1Component, data: { permission: 'Pages.User.Dashboard' } },
  { path: 'ttm-page_2', component: TtmPage2Component, data: { permission: 'Pages.User.Dashboard' } },
  { path: 'ttm-page_3', component: TtmPage3Component, data: { permission: 'Pages.User.Dashboard' } },
  { path: 'ttm-page_4', component: TtmPage4Component, data: { permission: 'Pages.User.Dashboard' } },
  

  ...and @NgModule declarations:

      declarations: [
          TtmPage0Component,
          TtmPage1Component,
          TtmPage2Component,
          TtmPage3Component,
          TtmPage4Component,
  

  When 'ngOnInit(); is called in TtmDashboardComponent the arguments are available for use:

      ngOnInit() {
          let menuId = parseInt(this._activatedRoute.snapshot.queryParams['menuId']);
          let menuName = this._activatedRoute.snapshot.queryParams['menuName'];
  

  Save Cancel