Home Getting property from extended rootscope
Reply: 0

Getting property from extended rootscope

Ron
1#
Ron Published in 2018-02-14 02:15:32Z

I'm not sure if I am doing this correctly. I have a property called CurrentPath on my extended rootscope interface called CustomRootScope. When the route changes successfully, it will set the current path to the CurrentPath property (this part works). When I inject the CustomRootScope into a component, I could not retrieve that CurrentPath property, it is undefined. Below is what I did, please let me know if you have any suggestion!

here is my CustomRootScope interface:

export interface CustomRootScope extends ng.IRootScopeService {
    CurrentPath: string;
}

here is my app.ts:

import * as angular from 'angular';
import 'angular-route';

// Modules
import './modules/moduleA';

// Interfaces
import { CustomRootScope } from './interfaces/customRootScope';

export let app = angular.module('app', ['ngRoute', 'app.moduleA'])
    .component('sidebarNavigation', new SidebarNavigationComponent())
    .controller('SidebarNavigationController', ['$rootScope', SidebarNavigationController])
    .config(['$locationProvider', ($locationProvider: ng.ILocationProvider) => {
        $locationProvider.html5Mode(true);
    }])
    .run(['$rootScope', '$location', ($rootScope: CustomRootScope, $location: ng.ILocationService) => {
        $rootScope.$on('$routeChangeSuccess', (event: any, next: any, current: any) => {
            $rootScope.CurrentPath = $location.path().split('/')[1];
        });
    }]);

here is my SidebarNavigationComponent:

import { CustomRootScope } from '../../interfaces/customRootScope';

export class SidebarNavigationComponent implements ng.IComponentOptions {
    public templateUrl: string = 'Content/src/app/components/layout/SidebarNavigation.html';
    public controller: string = 'SidebarNavigationController';
}

export class SidebarNavigationController {
    public ImagePath: string;

    constructor(public $rootScope: CustomRootScope) {
        if ($rootScope.CurrentPath === 'test') {
            this.ImagePath = 'imageOne.svg'
        }
        else {
            this.ImagePath = 'imageTwo.svg'
        }
    }
}
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.300573 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO