purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-08 19:45:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(FuseNavigation) Added support for new "isActiveMatchOptions" for Basic navigation items; https://github.com/angular/angular/pull/40303

Browse Source 
(docs) Updated FuseNavigation documentation
This commit is contained in:
sercan 2021-05-18 16:09:31 +03:00
parent fd859a8663
commit e4df408abe
7 changed files with 71 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
View File

@ -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">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div>
@ -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)">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div>

11
src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts
View File

@ -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);

3
src/@fuse/components/navigation/navigation.types.ts
View File

@ -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;

4
src/@fuse/components/navigation/vertical/components/basic/basic.component.html
View File

@ -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">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a>
@ -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)">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a>

7
src/@fuse/components/navigation/vertical/components/basic/basic.component.ts
View File

@ -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);

31
src/@fuse/services/utils/utils.service.ts
View File

@ -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
// -----------------------------------------------------------------------------------------------------

17
src/app/modules/admin/docs/core-features/components/navigation/navigation.component.html
View File

@ -97,6 +97,7 @@
link?: string;
externalLink?: boolean;
exactMatch?: boolean;
isActiveMatchOptions?: IsActiveMatchOptions;
function?: (item: FuseNavigationItem) => void;
classes?: {
title?: string;
@ -203,7 +204,21 @@
<div>exactMatch</div>
</td>
<td>
Sets the <em>exactMatch</em> parameter on the <em>router link active options</em>.
Sets the <em>exact</em> parameter on the <em>[routerLinkActiveOptions]</em>.
</td>
</tr>
<tr>
<td class="font-mono text-md text-secondary">
<div>isActiveMatchOptions</div>
</td>
<td>
Sets the <em>isActiveMatchOptions</em> object on the <em>[routerLinkActiveOptions]</em>. If provided, <em>exactMatch</em> option will be
ignored.
<a
href="https://angular.io/api/router/IsActiveMatchOptions"
target="_blank"
rel="noreferrer">https://angular.io/api/router/IsActiveMatchOptions
</a>
</td>
</tr>
<tr>