Use the navigation service in the fuse-navigation for easier navigation swap

This commit is contained in:
Sercan Yemen 2018-06-14 17:29:30 +03:00
parent 58dd3b93c3
commit edb4683dcb
2 changed files with 35 additions and 5 deletions

View File

@ -1,4 +1,8 @@
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
@Component({
selector : 'fuse-navigation',
@ -6,7 +10,7 @@ import { Component, Input, ViewEncapsulation } from '@angular/core';
styleUrls : ['./navigation.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class FuseNavigationComponent
export class FuseNavigationComponent implements OnInit
{
@Input()
layout = 'vertical';
@ -14,11 +18,37 @@ export class FuseNavigationComponent
@Input()
navigation: any;
// Private
private _unsubscribeAll: Subject<any>;
/**
* Constructor
*/
constructor()
constructor(
private _fuseNavigationService: FuseNavigationService
)
{
// Set the private defaults
this._unsubscribeAll = new Subject();
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void
{
// Load the navigation either from the input or from the service
this.navigation = this.navigation || this._fuseNavigationService.getCurrentNavigation();
// Subscribe to the current navigation changes
this._fuseNavigationService.onNavigationChanged
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((key) => {
this._fuseNavigationService.getNavigation(key);
});
}
}

View File

@ -23,7 +23,7 @@
<div class="navbar-content" fusePerfectScrollbar
[fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<fuse-navigation [navigation]="navigation" layout="vertical"></fuse-navigation>
<fuse-navigation layout="vertical"></fuse-navigation>
</div>
</div>
@ -33,7 +33,7 @@
<ng-container *ngIf="layout == 'horizontal'">
<div class="navbar-horizontal">
<fuse-navigation [navigation]="navigation" layout="horizontal"></fuse-navigation>
<fuse-navigation layout="horizontal"></fuse-navigation>
</div>
</ng-container>