How to retrieve last URL segment name in Angular 2 RC1 Router

Question

I have an Angular2 router (RC1) that loads the same component in all of its three routes:

@Routes([
  { path: '/create',     component: MyComponent },
  { path: '/detail/:id', component: MyComponent },
  { path: '/update/:id', component: MyComponent },
])

The reason behind this is because I need three forms for CRUD actions that very similar to each other. So, I decided to use the same component combined with a few *ngIfs based on the component mode (create, detail, update).

The problem now is that I can't find a way to get the name of the last segment on the URL. Ideally I could like to do something like this (pseudocode):

export class MyComponent {
  constructor(private router: Router) {
    this.mode = this.router.getLastURLSegmentName();
    if (this.mode == 'detail' or this.mode == 'update') {
      let param_id = this.router.getLastURLSegment().getParam('id');
    }
  }
}

How can I achieve such functionality? Any ideas? Thank you!

Community · Accepted Answer · 2017-05-23 12:02:24Z

0

I accomplished something similar

import 'rxjs/add/operator/first';
...

constructor(private router:Router, private routeSerializer:RouterUrlSerializer, private location:Location) {
  router.changes.first().subscribe(() => {

    let urlTree = this.routeSerializer.parse(location.path());
      console.log('id', urlTree.children(urlTree.children(urlTree.root)[0])[0].segment);
  });
}

See also https://stackoverflow.com/a/37230716/217408 or https://stackoverflow.com/a/37230758/217408

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Jun 2, 2016 at 13:34

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

2 Comments

AstrOne Over a year ago

Thanks for the quick reply my friend! I tried this but I get the following error: (A) 'first' does not exist on type 'Observable<void>'. (B) Property 'path' does not exist on type 'Location'.

Günter Zöchbauer Over a year ago

First is an operator and needs to be imported import 'rxjs/add/operator/first';

Collectives™ on Stack Overflow

How to retrieve last URL segment name in Angular 2 RC1 Router

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related