How to Access RouteParams in the App class in Angular2

Question

I have an Angular2 application created using the CLI which I need to run in different modes. These modes need to be passed on the query string as the page will be hosted in an IFrame.

From what I have read I there is a problem accessing the RouteParams in the top level application as they are only available in a routed component.

currently I'm achieving what I want by going to the javascript location.search object but if possible I would prefer to do this in the correct dependency injected way so I can test things properly.

Can someone advise me the correct way to access the parameters.

@Component({
  selector: 'eox-app',
  providers: [ROUTER_PROVIDERS, RouteParams,
        FilterService,
        LoggingService,
        SpinnerService,
        StateService,
    ],
  templateUrl: 'app/eox.html',
  styleUrls: ['app//eox.css'],
  directives: [ROUTER_DIRECTIVES],
  pipes: []
})
@RouteConfig([

].concat(CliRouteConfig))

export class EoxApp {
    public menuItems = [
        { caption: 'Dashboard', link: ['DashboardRoot'] },
        { caption: 'Fonds', link: ['FundRoot'] },
        { caption: 'Logs', link: ['LogRoot'] },
        { caption: 'API', link: ['ApiRoot'] }
    ];

    public isEmbeded = false;
    constructor(
        private _router: Router,
        private _log: LoggingService,
        private _state: StateService,
        private _routeParams: RouteParams) {

        this.checkForEmbeded();
        let jwt = this.getCookie("eox-token");
        this._state.isAuthenticated = jwt === "123456";

        if(!this._state.isAuthenticated){
            this._log.log("Not authenticated", "Eox vNext");
            this._router.navigate(['DashboardRoot']);
        }
        else {
            this._log.log("Authenticated user", "Eox vNext");
        }
        if(this.isEmbeded && this._state.isAuthenticated)
         {
             this._log.log("Redirect to fundroot", "Eox vNext");
                this._router.navigate(['FundRoot']);
         }
    }

    getCookie(c_name) {
        var i, x, y, ARRcookies = document.cookie.split(';');
        for (i = 0; i < ARRcookies.length; i++) {
            x = ARRcookies[i].substr(0, ARRcookies[i].indexOf('='));
            y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
            x = x.replace(/^\s+|\s+$/g, "");
            if (x == c_name) {
                return unescape(y);
            }
        }
    }

    checkForEmbeded() {
        this.isEmbeded = location.search.indexOf("embeded") > 0;
        this._log.log("Embeded mode " + this.isEmbeded, "Eox vNext");
    }
}

score 0 · Answer 1 · answered Apr 13 '16 at 13:51

0

You can inject the Router (like you already do), subscribe to it and then access the params like shown below:

 constructor(
        private _router: Router,
        private _log: LoggingService,
        private _state: StateService,
        private _routeParams: RouteParams) {
    this._router.subscribe(path => {
      console.debug(this._router.currentInstruction.component.params);
    });
}

answered Apr 13 '16 at 13:51

Günter Zöchbauer

623,577
216
2,003
1,567

looks promising but I get a build error:rror: `Typescript found the following errors: D:/EOX2/depots/tmp/broccoli_type_script_compiler-input_base_path-3f2kXEiS.tmp/0/src/client/app/eox.ts (63,28): Argumen of type '{ [key: string]: string; }' is not assignable to parameter of type 'string'. at BroccoliTypeScriptCompiler._doIncrementalBuild (D:\EOX2\depots\node_modules\angular-cli\lib\broccoli\broccoli-typ script.js:111:19)` – Mark Apr 13 '16 at 14:21
In the closure this refers to the function rather than the component – Mark Apr 13 '16 at 14:35
I translated it from Dart where I tested it. Have to check again in TypeScript. – Günter Zöchbauer Apr 13 '16 at 14:36
I found also http://stackoverflow.com/a/35776884/217408 where the code is similar. – Günter Zöchbauer Apr 13 '16 at 14:37
[**Plunker example**](https://plnkr.co/edit/wXfYft?p=preview) when you switch to the `Other` route, the params will be printed to the console. – Günter Zöchbauer Apr 13 '16 at 14:45
OK, the error was just caused by TS wanting the debug to take a string, so wrapping the params in a Stringify resolved that problem. The bigger issue is that the params object is an empty object by this time as Angular has done its magic and its now dealing with internal routing – Mark Apr 13 '16 at 15:04
Not sure what you mean. In the Plunker it prints the params object containing the parameter value. – Günter Zöchbauer Apr 13 '16 at 15:05

How to Access RouteParams in the App class in Angular2

1 Answers1