Angular 2: uiRouter get current state params in root component

Question

How can i get params in root component? (app.component.ts)

I have such app.component.ts (i'm using Angular/Cli):

...

import {Transition} from "@uirouter/angular";
...

export class AppComponent {
  id: any;

  constructor(private trans: Transition) {
    this.id = trans.params().someId;
  }
}

but i get:

ERROR Error: No provider for Transition!

But if i use the same logic in any inner component (which has route) - everything is fine. What i do wrong?

Also!

I'm using ngx-restangular. And i have in app.module.ts:

// Function for settting the default restangular configuration
export function RestangularConfigFactory (RestangularProvider, authService) {
  RestangularProvider.setBaseUrl('http://api.test.com/v1');

  // This function must return observable
  var refreshAccesstoken = function () {
    // Here you can make action before repeated request
    return authService.functionForTokenUpdate();
  };

  RestangularProvider.addErrorInterceptor((response, subject, responseHandler) => {
    if (response.status === 403) {

      /*Here somehow I need to get route params too, is it possible, and how?*/

      refreshAccesstoken()
      .switchMap(refreshAccesstokenResponse => {
        //If you want to change request or make with it some actions and give the request to the repeatRequest func.
        //Or you can live it empty and request will be the same.

        // update Authorization header
        response.request.headers.set('Authorization', 'Bearer ' + refreshAccesstokenResponse)

        return response.repeatRequest(response.request);
      })
      .subscribe(
        res => responseHandler(res),
        err => subject.error(err)
      );

      return false; // error handled
    }
    return true; // error not handled
  });
}

// AppModule is the main entry point into Angular2 bootstraping process
@NgModule({
  bootstrap: [ AppComponent ],
  imports: [ 
    // Importing RestangularModule and making default configs for restanglar
    RestangularModule.forRoot([authService], RestangularConfigFactory),
  ],
})

how i can get there route params as well?

Please, don't use abstractions where they are not appropriate. If `Slib` is some specific library (perfectScrollbar), state this explicitly, so the answer could be applicable to this particular library. There's nothing in the question that would be generic to JS libraries in whole. *what is the syntax for ... in typeScript* - it is the same as in JavaScript. TS is a superset of JS. And it's not clear what the problem is. — Estus Flask, May 25 '17 at 23:36
@estus you aren't right, the same construction is used for a lot of libs — brabertaser19, May 26 '17 at 06:28
Yes, it is constructor function call. And it is all the same in JS and TS. But what does it have to do with all that 'update method' stuff? All that `$('#container').perfectScrollbar('update')` and `SLib('update')` are totally different things that are highly specific to particular library. Sorry, it's not clear what you're asking. The question probably makes sense in your head but not for the answerers, making you the only person who can understand and answer it. — Estus Flask, May 26 '17 at 07:27

score 2 · Accepted Answer · answered May 30 '17 at 21:07

2

Option 1: route to root component

If you currently have in index.html:

<root-component></root-component> <!-- has a ui-view inside it -->

and

bootstrap: RootComponent

You can switch to bootstrapping a UIView:

<ui-view></ui-view>

and

bootstrap: UIView

then route to your root component

const rootState = { component: RootComponent }

then your root component will be able to inject the initial Transition

See the sample app for an example:

https://github.com/ui-router/sample-app-angular/blob/e8f8b6aabd6a51bf283103312930ebeff52fe4c3/src/app/app.module.ts#L37

https://github.com/ui-router/sample-app-angular/blob/e8f8b6aabd6a51bf283103312930ebeff52fe4c3/src/app/app.states.ts#L7-L18

Option 2: Use the transition start observable

class RootComponent {
  constructor(router: UIRouter) {
    this.subscription = router.globals.start$.subscribe((trans: Transition) => console.log(trans)))
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Option 3: Use a transition hook

If you're trying to do some action for the initial transition, do this in a transition hook

function configFn(router: UIRouter) {
  router.transitionService.onStart({}, function(trans: Transition) {
    if (trans.$id === 0) {
      return somepromise; // Allows async, etc
    }
  }
}

answered May 30 '17 at 21:07

Chris T

8,186
2
29
39

thanks a lot! but the way, how to get in`router.transitionService.onStart({}, function(trans: Transition) {` route name where i'm going to? – brabertaser19 Jun 01 '17 at 08:56
Get it from the transition. `trans.to()` – Chris T Jun 01 '17 at 15:49
Here is the API doc for `Transition` and `Transition.to`: https://ui-router.github.io/ng2/docs/latest/classes/transition.transition-1.html#to – Chris T Jun 01 '17 at 21:03
strange... i'm getting `ObjectUnsubscribedError` when i added such code: https://pastebin.com/raw/4wQPQLSV – brabertaser19 Jun 02 '17 at 15:08
please check my question: https://stackoverflow.com/questions/44359094/angular-4-uirouter-way-to-get-custom-wrappers – brabertaser19 Jun 05 '17 at 11:02
also, are you sure this is a working sample: `export function uiRouterConfigFn(router: UIRouterModule) { router.urlService.rules.otherwise({state: 'nonExisting'}); }` ? – brabertaser19 Jun 08 '17 at 16:13
I think it should be `uiRouterConfigFn(router: UIRouter)` – Chris T Jun 08 '17 at 18:29
by the way: `this.subscription = router.globals.start$.subscribe((trans: Transition) => console.log(trans)))` isn't working check it plz, Property 'start$' does not exist on type 'UIRouterGlobals' – brabertaser19 Jun 10 '17 at 14:57
saying other words: how to show conditionally different components (which are wrappers with own ui-view) using your code #3, becouse now it's showing me subscribe errors – brabertaser19 Jun 10 '17 at 17:16
hey, what about router.globals.start$.subscribe ? – brabertaser19 Jun 21 '17 at 14:28
The error you mention is a typescript error. The `@uirouter/rx` package augments the `RouterGlobals` interface and adds `start$`. If that isn't working, you could always cast the globals as `any`, i.e.: `(router.globals as any).start$.subscribe()` – Chris T Jun 22 '17 at 03:39

Angular 2: uiRouter get current state params in root component

1 Answers1

Option 1: route to root component

Option 2: Use the transition start observable

Option 3: Use a transition hook