The workaround provided by Synfusion in post above (July19) works in the most basic of uses, but does not work for typical cases.
It does not
The workaround fixes everything, by overriding the MenuItemModel[] class to a child class and poloymorphism on that. The MenuItemModel is a class provided by Syncfusion defining the id, Text, iconCss and url of the route.
- In a new file create a new child interface extending (inherting) from MenuItemMode as below
export interface IMenuItemModelChild extends MenuItemModel {
path?:string; //This is for your path
query?:string; //This is for your optional query param, add more query properties if you need them
items?: IMenuItemModelChild[]; //We over write the exiting items property of the parent
}
2. In your components ts file (the component where you use the menu), create your menu structure using IMenuItemModelChild instead of MenuItemModel
public menuItems: IMenuItemModelChild[] = [
{
text: 'Project',
path: "all",
iconCss: 'icon-globe icon',
items: [
{ text: 'Open', path: 'projects', query: "44"},
{ text: 'New', path: 'projects' },
]
},
{
text: 'Suppliers',
iconCss: 'icon-bell-alt icon',
items: [
{ text: 'New' },
{ text: 'Edit' },
]
},
3.In you httml file subscribe to the 'select' event (note you bind to 'menuItems' as normal, which is now a child class (ignore the orientation and cssClass properties they are not part of this workaround)
[items]='menuItems' orientation='Vertical' cssClass='dock-menu' (select) = "onSelect($event)" >
4. In your component.ts file define the event handler, cast the 'items' property of the event handler to
MenuItemModelChild, this gives you access to the path and query variables which you then use in the router.
public onSelect(event:MenuEventArgs)
{
const x:MenuItemModelChild = event.item;
this.router.navigate([x.path, { filter: x.query, foo: 'foo' }], { relativeTo: this.route });
}
5. You'll need to inject Router and ActivatedRoute in to the constructor as shown below for completeness.
constructor(
private router: Router,
private route:ActivatedRoute
) { }
6. And just so there is no misunderstanding, you don't use the workaround as proposed by Syncfusion. The only edits to the HTML
are as per my notes above. AND the existing url field must always be set to empty string, else an absolute route will occur
