src/app/app.component.ts
selector | app-root |
styleUrls | app.component.scss |
templateUrl | ./app.component.html |
constructor(router: Router, checkoutService: CheckoutService, store: Store
|
Defined in src/app/app.component.ts:18
|
ngOnInit |
ngOnInit()
|
Defined in src/app/app.component.ts:35
|
Returns:
void
|
isCheckoutRoute |
isCheckoutRoute()
|
Defined in src/app/app.component.ts:43
|
Returns:
void
|
Private findCurrentStep |
findCurrentStep(currentRoute: any)
|
Defined in src/app/app.component.ts:55
|
Returns:
void
|
ngOnDestroy |
ngOnDestroy()
|
Defined in src/app/app.component.ts:61
|
Returns:
void
|
checkoutUrls |
checkoutUrls: |
Defined in src/app/app.component.ts:18
|
currentStep |
currentStep: |
Defined in src/app/app.component.ts:17
|
currentUrl |
currentUrl: |
Defined in src/app/app.component.ts:16
|
orderSub$ |
orderSub$: |
Defined in src/app/app.component.ts:15
|
import { getAuthStatus } from './auth/reducers/selectors';
import { AppState } from './interfaces';
import { Store } from '@ngrx/store';
import { Subscription } from 'rxjs/Subscription';
import { CheckoutService } from './core/services/checkout.service';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
orderSub$: Subscription;
currentUrl: string;
currentStep: string;
checkoutUrls = ['/checkout/cart', '/checkout/address', '/checkout/payment'];
constructor(
private router: Router,
private checkoutService: CheckoutService,
private store: Store<AppState>
) {
router
.events
.filter(e => e instanceof NavigationEnd)
.subscribe((e: NavigationEnd) => {
this.currentUrl = e.url;
this.findCurrentStep(this.currentUrl);
window.scrollTo(0, 0);
});
}
ngOnInit() {
this.store.select(getAuthStatus).
subscribe(() => {
this.orderSub$ = this.checkoutService.fetchCurrentOrder()
.subscribe();
});
}
isCheckoutRoute() {
if (!this.currentUrl) {
return false;
}
const index = this.checkoutUrls.indexOf(this.currentUrl);
if (index >= 0) {
return true;
} else {
return false;
}
}
private findCurrentStep(currentRoute) {
const currRouteFragments = currentRoute.split('/');
const length = currRouteFragments.length;
this.currentStep = currentRoute.split('/')[length - 1];
}
ngOnDestroy() {
this.orderSub$.unsubscribe();
}
}
<div class="default">
<section>
<app-header *ngIf="currentUrl && !isCheckoutRoute()"></app-header>
<app-checkout-header [currentStep]="currentStep" *ngIf="currentUrl && isCheckoutRoute()"></app-checkout-header>
<app-loading-indicator></app-loading-indicator>
<app-notification></app-notification>
<main class="body container">
<router-outlet></router-outlet>
</main>
<app-checkout-footer *ngIf="currentUrl && isCheckoutRoute()"></app-checkout-footer>
<app-footer *ngIf="currentUrl && !isCheckoutRoute()"></app-footer>
</section>
</div>