How to access @ui-router/angular url and params within ui-view state component?

Question

I use @uirouter/angular in my project and have a number of states like:

export let MAIN_STATES: Ng2StateDeclaration[] = [
  { name: 'state1', url: '/state1',  component: State1Component },
  { name: 'state2', url: '/state2',  component: State2Component },
...
];

Naturally in app.component I have

<ui-view></ui-view>

which loads appropriate state component depending on path. The problem is that in @uirouter doc and examples there is a lot info about resolve functions, transitions etc related to state entering configuration, but I can't find how to access transition (particulary I need url) from state component itself (State1Component for example). It's stated that params can be accessed just by name:

@Input param1;

I've tried to do it with url, but it's undefined. How to do it?

@Chellappan Please look into my answer and let me know if there is a better approach to the problem — Arsenii Fomin
– Arsenii Fomin, Commented Jul 11, 2018 at 18:21

Arsenii Fomin · Accepted Answer · 2018-07-11 18:20:18Z

2

The approach to get url I've found so far is the next. In state declaration:

export let MAIN_STATES: Ng2StateDeclaration[] = [
  { name: 'state1', url: '/state1',  component: State1Component,
    resolve: [{
      token: 'transition',
      deps: [Transition],
      resolveFn: (transition) => transition
    }]
  },
...
];

In State1Component:

export class State1Component implements OnInit {
  @Input() transition;

  url: string;

  constructor() { }

  ngOnInit() {
    this.transition.promise.then((res) => this.url = res.url);
  }
}

Please let me know if there is a better approach.

answered Jul 11, 2018 at 18:20

Arsenii Fomin

3,3664 gold badges25 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to access @ui-router/angular url and params within ui-view state component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related