How to get the current route segment (not the full url) in Angular

0
votes

I've seen many questions about getting the current route in Angular. As far as I can tell, every one of the questions and associated answers I've reviewed will return the full current URL.

constructor(router: Router){}

myMethod(){
    this.router.url // returns the full URL, regardless of where in the routing tree
                    // the component is being instantiated.
}

I want to find the specific segment on which the router is routing to my component. The component may be instantiated more than once in the route. My current code is getting the full URL, but I want to know the specific segment for which the component was instantiated.

More information:

The component is a custom Tab Strip. It provides an unnamed <router-outlet> in which to render individual tab content as the user clicks on the tabs. The component using the tab strip is lazy-loaded. However, one of the tabs also uses the same Tab Strip component for its content (that component is also lazy-loaded). This is where things break down. When refreshing the browser while navigated to one of those nested tabs, I get an error: "Cannot activate an already activated outlet".

Investigating that error message, it appears to be an open issue with Angular.

Proposed solutions in a related issue remove the error, but also remove the top-level Tab Strip's content. I am thinking that if I could better filter the proposed solutions' RouterOutlet.deactivate() call, I might remove the error while still displaying the Tab Strips' content at all nesting levels.

That improved filtering requires that the Tab Strip component know the current segment for which it is being instantiated by the router.

Although, this question is about getting the current segment from the Router; fixing the error which lead me here would also be helpful.

2
angulartypescriptangular-router
You will have better answers if your question is focused on one specific item. I would suggest moving the second part of your question to a separate post once you got answers to the first one. – ulmas
@samlu, Maihan's answer got me the information I wanted for this question. Unfortunately, the original problem remains - and you are right, that should be a different question. But that question's answers and solutions in the GitHub links aren't fixing my problem. :( – Zarepheth

2 Answers

2
votes

Use NavigationEnd. Each time navigation happens, the Router.events is triggered and check if it's successful to get the current route only.

constructor(private router: Router) {
  router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      console.log(event.url);
    }
  });
}

The event gives you url property of the current route.

0
votes

UrlSegment is available for that purpose. Example from the documentation:

@Component({templateUrl:'template.html'})
class MyComponent {
  constructor(router: Router) {
    const tree: UrlTree = router.parseUrl('/team;id=33');
    const g: UrlSegmentGroup = tree.root.children[PRIMARY_OUTLET];
    const s: UrlSegment[] = g.segments;
    s[0].path; // returns 'team'
    s[0].parameters; // returns {id: 33}
  }
}

https://angular.io/api/router/UrlSegment