CODEWITHSUNDEEP
angularangular2-routing
Avram Virgil
Avram Virgil

Reputation: 1210

Subscribe to child route changes, Know in parent what child route segment is selected?

Angular v2.2.1, Router v3.2.1

I have a nested router with children, the router link looks like this:

/todo/iwgv4ehyav544f7c/zone1 (zone1 is the child route of todo/:id)

/todo/iwgv4ehyav544f7c/zone2 (zone2 is the child route of todo/:id)

Now keep in mind that todo/:id page has it's own router-outlet that displays the children.

In the parent (todo/:id) I have I have 2 buttons, Button1 and Button2.

I want to display Button1 when child route zone1 is active and Button2 when zone2 is active.

I have managed to make something but I don't think it is the correct way:

   router.events
     .filter(event => event instanceof NavigationEnd)
     .map(value => value.url.split("/")) // what I get: ["","todo","iwgv4ehyav544f7c","zone1"]
     .map(value => value[3]) // selecting the value at id 3 which is the child param
     .subscribe(response => {
       this.activatedChildUrl = response;  // end value is "zone1"
     })

Is there another better way to subscribe to the router and get the child params, so I can use this value in the parent?

Edit:

Other things I have tried so far that did not work from Victor Savkin book:

activatedRoute.url.subscribe(() =>{
  activatedRoute.snapshot.firstChild.url[0].path

}); // is firing only once

Upvotes: 1

Views: 1712

Answers (2)

caden311
caden311

Reputation: 981

I like this more:

HTML: *ngIf="router.url.includes('childroute')"

Upvotes: 0

Avram Virgil
Avram Virgil

Reputation: 1210

The router has a more simple and elegant solution to determine which path is active and you can hide and show elements depending on the active route.

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

Applied to my project example above:

In TS: constructor(router: Router){}

In HTML: *ngIf="router.isActive('/todo/' + id + '/zone1')"

You extract the id from your route params or from your selected object.

Upvotes: 2

Related Questions