diff --git a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
index 14f8acd9..1d136ccf 100644
--- a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
+++ b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
@@ -11,7 +11,7 @@
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
[routerLink]="[item.link]"
[routerLinkActive]="'fuse-horizontal-navigation-item-active'"
- [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
+ [routerLinkActiveOptions]="item.isActiveMatchOptions">
@@ -39,7 +39,7 @@
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
[routerLink]="[item.link]"
[routerLinkActive]="'fuse-horizontal-navigation-item-active'"
- [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+ [routerLinkActiveOptions]="item.isActiveMatchOptions"
(click)="item.function(item)">
diff --git a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts
index 8d4e2883..e32f5819 100644
--- a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts
+++ b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts
@@ -4,6 +4,7 @@ import { takeUntil } from 'rxjs/operators';
import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { FuseUtilsService } from '@fuse/services/utils/utils.service';
@Component({
selector : 'fuse-horizontal-navigation-basic-item',
@@ -24,7 +25,8 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
*/
constructor(
private _changeDetectorRef: ChangeDetectorRef,
- private _fuseNavigationService: FuseNavigationService
+ private _fuseNavigationService: FuseNavigationService,
+ private _fuseUtilsService: FuseUtilsService
)
{
}
@@ -38,6 +40,13 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
*/
ngOnInit(): void
{
+ // If the item doesn't have "isActiveMatchOptions",
+ // set it using the equivalent form of "item.exactMatch"
+ if ( !this.item.isActiveMatchOptions )
+ {
+ this.item.isActiveMatchOptions = this.item.exactMatch ? this._fuseUtilsService.exactMatchOptions : this._fuseUtilsService.subsetMatchOptions;
+ }
+
// Get the parent navigation component
this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
diff --git a/src/@fuse/components/navigation/navigation.types.ts b/src/@fuse/components/navigation/navigation.types.ts
index 2d729842..32b37ae4 100644
--- a/src/@fuse/components/navigation/navigation.types.ts
+++ b/src/@fuse/components/navigation/navigation.types.ts
@@ -1,3 +1,5 @@
+import { IsActiveMatchOptions } from '@angular/router';
+
export interface FuseNavigationItem
{
id?: string;
@@ -16,6 +18,7 @@ export interface FuseNavigationItem
link?: string;
externalLink?: boolean;
exactMatch?: boolean;
+ isActiveMatchOptions?: IsActiveMatchOptions;
function?: (item: FuseNavigationItem) => void;
classes?: {
title?: string;
diff --git a/src/@fuse/components/navigation/vertical/components/basic/basic.component.html b/src/@fuse/components/navigation/vertical/components/basic/basic.component.html
index 364215c1..7b255875 100644
--- a/src/@fuse/components/navigation/vertical/components/basic/basic.component.html
+++ b/src/@fuse/components/navigation/vertical/components/basic/basic.component.html
@@ -11,7 +11,7 @@
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
[routerLink]="[item.link]"
[routerLinkActive]="'fuse-vertical-navigation-item-active'"
- [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
+ [routerLinkActiveOptions]="item.isActiveMatchOptions">
@@ -39,7 +39,7 @@
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
[routerLink]="[item.link]"
[routerLinkActive]="'fuse-vertical-navigation-item-active'"
- [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+ [routerLinkActiveOptions]="item.isActiveMatchOptions"
(click)="item.function(item)">
diff --git a/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts b/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts
index 8fad0032..556e8d5e 100644
--- a/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts
@@ -40,6 +40,13 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
*/
ngOnInit(): void
{
+ // If the item doesn't have "isActiveMatchOptions",
+ // set it using the equivalent form of "item.exactMatch"
+ if ( !this.item.isActiveMatchOptions )
+ {
+ this.item.isActiveMatchOptions = this.item.exactMatch ? this._fuseUtilsService.exactMatchOptions : this._fuseUtilsService.subsetMatchOptions;
+ }
+
// Get the parent navigation component
this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
diff --git a/src/@fuse/services/utils/utils.service.ts b/src/@fuse/services/utils/utils.service.ts
index 643aa03f..0c307ee6 100644
--- a/src/@fuse/services/utils/utils.service.ts
+++ b/src/@fuse/services/utils/utils.service.ts
@@ -1,4 +1,5 @@
import { Injectable } from '@angular/core';
+import { IsActiveMatchOptions } from '@angular/router';
@Injectable({
providedIn: 'root'
@@ -12,6 +13,36 @@ export class FuseUtilsService
{
}
+ // -----------------------------------------------------------------------------------------------------
+ // @ Accessors
+ // -----------------------------------------------------------------------------------------------------
+
+ /**
+ * Get the equivalent "IsActiveMatchOptions" options for "exact = true".
+ */
+ get exactMatchOptions(): IsActiveMatchOptions
+ {
+ return {
+ paths : 'exact',
+ fragment : 'ignored',
+ matrixParams: 'ignored',
+ queryParams : 'exact'
+ };
+ }
+
+ /**
+ * Get the equivalent "IsActiveMatchOptions" options for "exact = false".
+ */
+ get subsetMatchOptions(): IsActiveMatchOptions
+ {
+ return {
+ paths : 'subset',
+ fragment : 'ignored',
+ matrixParams: 'ignored',
+ queryParams : 'subset'
+ };
+ }
+
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
diff --git a/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html b/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html
index 38ccdca5..257c7b9b 100644
--- a/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html
+++ b/src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html
@@ -97,6 +97,7 @@
link?: string;
externalLink?: boolean;
exactMatch?: boolean;
+ isActiveMatchOptions?: IsActiveMatchOptions;
function?: (item: FuseNavigationItem) => void;
classes?: {
title?: string;
@@ -203,7 +204,21 @@
exactMatch
- Sets the exactMatch parameter on the router link active options.
+ Sets the exact parameter on the [routerLinkActiveOptions].
+ |
+
+
+
+ isActiveMatchOptions
+ |
+
+ Sets the isActiveMatchOptions object on the [routerLinkActiveOptions]. If provided, exactMatch option will be
+ ignored.
+ https://angular.io/api/router/IsActiveMatchOptions
+
|