Ngx-admin: Page used in sidebar in multiple instances

[twotree]

• I'm submitting a ...
  [ ] bug report
  [X ] feature request
  [ ] question about the decisions made in the repository

• Do you want to request a feature or report a bug?
  Same page used multiple times in the sidebar for different instances of the same page.

• What is the current behavior?
  Side bar utilizes each page once i.e. Typography, Buttons, Icons...

• What is the expected behavior?
  In this png we have Budgets as the heading with both Hanna and Tom being separate budgets but utilizing the same page. It would be nice to use the same page multiple times. If this is already possible an example would be great.
  

• What is the motivation / use case for changing the behavior?
  Variation in using the sidebar.

• Please tell us about your environment:

• Angular version: 2.0.0-rc.X

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[damnko]

Maybe I'm missing something but, have you tried to simply point to the same component and passing the user object as a route param?

// users.routing.ts
...
{ path: 'hanna', component: userComponent, data: hannaDataObj },
{ path: 'tom', component: userComponent, data: tomDataObj }
....

and then retrieving that data with this.route.data.subscribe(...) .
Makes sense?

[twotree]

The problem is the path has to be the same. This basically makes the path hardcoded. It is a similar problem if you go the other direction and have the user name as the menu item and sub-item as budget. I've added an integer in front of budget to differentiate the two. I selected the top budget.

Note the page has 100 budget not 101 and both budgets are highlighted. In the selection of the proper item the code has:
protected _selectItem(object: any): any {
object.selected = object.url === ('#' + this._router.url);
which is based on the path. If the router allowed additional properties an id could be added and then compared with an added property object.route.id. If someone has a way to add that to the router let me know. Or some other solution. Thanks

[twotree]

If i have the routing as:
const routes: Routes = [
{
path: '',
component: Samples,
children: [
{ path: 'sample/:id', component: Sample}
]
}
];

export const routing = RouterModule.forChild(routes);

and the menu passing the id as:
children: [
{
path: 'sample/' + id,

The issue is in the baMenu.service _prepareItem when it is serialized:
let itemUrl = this._router.serializeUrl(this._router.createUrlTree(object.route.paths));

The / is serialized to %2F. Is there a way around this other than doing a replace in the itemUrl like:
itemUrl = itemUrl.replace("%2F", "/");

Thanks for any better ways (correct way).

[kinglionsoft]

I have the same problem
After I did as @twotree said, it worked. But the baContentTop did not show the menu title. Then, I do as following:

protected _prepareItem(object: any): any {
    if (!object.skip) {
      object.target = object.target || '';
      object.pathMatch = object.pathMatch || 'full';

      if(Array.isArray(object.route.paths)){
         let last=object.route.paths[object.route.paths.length-1];
         if(last.indexOf('/')>=0){
           object.route.paths.splice(object.route.paths.length-1);
           object.route.paths=object.route.paths.concat(last.split('/'));
         }
      }

      return this._selectItem(object);
    }
    return object;
  }

[BoyardIsBack]

@kinglionsoft Thanks a lot, it worked for me.

[KissBalazs]

@twotree check my last issue, and a fix for that if you still need help about the malformed "%2F-s

https://github.com/akveo/ng2-admin/issues/1185

[nnixaa]

Closing due to inactivity.

[parane]

you can add like this
path: ["/", "pages", "sample","1"],