Dynamic navbar and Angular 4 routing

Question

i have this routing module in App Module:

RouterModule.forRoot([
      {path: '**', component: SecondoComponent, data : {some_data : '2'}},
      {path: 'first', component: PrimoComponent, data : {some_data :'1'}},
      {path: 'second', component: SecondoComponent, data : {some_data : '2'}}])

and a bar component with this code:

 export class BarComponent implements OnInit {
product;
constructor(router:Router, route:ActivatedRoute) {
  router.events
  .filter(e => e instanceof NavigationEnd)
  .forEach(e => {
    this.product = route.root.firstChild.snapshot.data.some_data;
    console.log(this.product);
  });
 }

In product, there is the parameter included in "some_data" in App Module for every route.

The problem is in template:

<app-bar></app-bar>

<nav>
    <ul class="nav nav-tabs">
        <li>
            <a routerLink='/first' >First</a>
        </li>
        <li>
            <a routerLink='/second' >Second</a>
        </li> 
    </ul>          
</nav>

    <router-outlet></router-outlet>

If i click on a link, the view not change and in console.log i have always the parameter "2" but i click on the "first link".

nll_ptr · Accepted Answer · 2019-09-16 15:30:48Z

1

You need to move

{path: '**', component: SecondoComponent, data : {some_data : '2'}},

to the very last line of your route paths, otherwise the router will always include SecondoComponent in the router outlet.

answered Sep 16, 2019 at 15:30

nll_ptr

9078 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Dynamic navbar and Angular 4 routing

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related