Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to generate url path in new Router Angular 2

What analog deprecated-router method generate in new Router 3.0.0? Early it can take something like this:

this._router.generate(['Profile']).urlPath;

How do it on new router?

like image 419
m.artamoshkin Avatar asked Oct 12 '16 15:10

m.artamoshkin


People also ask

How do I get the URL for activatedRoute?

You can use the activated route to get active URL. (<RouterStateSnapshot>activatedRoute['_routerState']). url , if you like to type it.

What does the * * path in Angular router do?

The two asterisks, ** , indicate to Angular that this routes definition is a wildcard route. For the component property, you can define any component in your application.

What is URL tree in Angular?

Descriptionlink Since a router state is a tree, and the URL is nothing but a serialized state, the URL is a serialized tree. UrlTree is a data structure that provides a lot of affordances in dealing with URLs. Further information is available in the Usage Notes...


2 Answers

https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#createUrlTree-anchor

var urlTree = this._router.createUrlTree(['Profile']);

You can pass the result to

this._router.navigate(/*string|UrlTree);

or get the URL

var url = this._router.createUrlTree(['Profile']).toString();

Edit: As of Angular 6, you pass the result to NavigateByUrl:

this._router.navigateByUrl(string|UrlTree);
like image 146
Günter Zöchbauer Avatar answered Sep 18 '22 01:09

Günter Zöchbauer


These are the current examples from the page referenced by Günter

// create /team/33/user/11
router.createUrlTree(['/team', 33, 'user', 11]);

// create /team/33;expand=true/user/11
router.createUrlTree(['/team', 33, {expand: true}, 'user', 11]);

// you can collapse static segments like this (this works only with the first passed-in value):
router.createUrlTree(['/team/33/user', userId]);

// If the first segment can contain slashes, and you do not want the router to split it, you
// can do the following:

router.createUrlTree([{segmentPath: '/one/two'}]);

// create /team/33/(user/11//right:chat)
router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: 'chat'}}]);

// remove the right secondary node
router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: null}}]);

// assuming the current url is `/team/33/user/11` and the route points to `user/11`

// navigate to /team/33/user/11/details
router.createUrlTree(['details'], {relativeTo: route});

// navigate to /team/33/user/22
router.createUrlTree(['../22'], {relativeTo: route});

// navigate to /team/44/user/22
router.createUrlTree(['../../team/44/user/22'], {relativeTo: route});

https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#createUrlTree-anchor

like image 26
Simon_Weaver Avatar answered Sep 21 '22 01:09

Simon_Weaver