routerlink not reloading component

Question

My welcome.component contains the menu and the tab, once i click on a menu item routerlink is not initiating a new request, therefore, tab component is not reloading. tab component is called by multiple router link and should be reloaded everytime.

welcome.component.html

<nav-menu></nav-menu>
<tab><tab>

navMenu.component.html

First Time url = http://localhost:xxxx/welcome

once I click on an item from navMenu.component.html url does change to http://localhost:53620/tab/2

however, tab.component need to fire ngOnInt to reload the data for id 2.

  <ul class="list-unstyled list" *ngFor='let menu of menues'>

      <li><a [routerLink]="['/tab',menu.LinkTabID]" class="anchorLink"><i class="icon-home scolor" ></i><font color="white">{{menu.Name}}</font></a></li>

  </ul>

tab.component.html

  <div class="row  left" *ngFor='let control of tabControls; let i = index' style="padding-bottom:3px">
      <div class="col-lg-2 text-left" style="border:0px dotted">
           {{control.DropDownTitle}}:
      </div>
      <div class="col-lg-pull-3 text-left">
          <select name="{{control.DropDownTitle}}" [(ngModel)]="selected[i]" style="width:80%" required>
             <option value="" selected>Select</option>
             <option *ngFor='let controlList of control.DropdownValues' [ngValue]="controlList.Value">
                  {{controlList.Value}}
              </option>
          </select>

      </div>
</div>

app.module

RouterModule.forRoot([
     { path: 'welcome', component: WelcomeComponent},
     { path: '', redirectTo: 'welcome', pathMatch: 'full' },
     { path: '**', redirectTo: 'welcome', pathMatch: 'full' }

]),

navMenu.module

imports: [BrowserModule,
    RouterModule.forChild([
        { path: 'tab/:id', component: WelcomeComponent}//,
    ]),
],
declarations: [NavMenuComponent],
providers: [NavMenuService],
exports: [NavMenuComponent]

tab.component

ngOnInit(): void {
   this.linkTabID = +this._rout.snapshot.params['id']
   if (isNaN(this.linkTabID))
   {
       this._appParams.GetDefaultTab(this.linkID, this.psnlUID)
           .subscribe( data => {
                this.linkTabID = data.result.LinkTabID;

                this.GetControls(data.result.LinkTabID);
            },
            error => this.errorMessage = <any>error);
    }
    else
    {
       this.GetControls(this.linkTabID);
    }
}

it only reloads if i do this which is not good because the page will be blank then the url will always be locLHOSTxxx/welcome without the id which I use to reload data

<ul class="list-unstyled list" *ngFor='let menu of menues'>

     <li><a (click)="onLinkClick"('/tab',menu.LinkTabID)" class="anchorLink"><i class="icon-home scolor" ></i><font color="white">{{menu.Name}}</font></a></li>

</ul>

navMenu.component

onLinkClick(routeValue: string, tabID: string) {
    this._router.navigate(['/tab', { id: tabID }]);
}

*****************Update***************************************************

I took off navMenu.module and tab.module and combined them all in app.module

   RouterModule.forRoot([
            { path: 'welcome', component: WelcomeComponent },
            { path: 'tab/:id', component: WelcomeComponent },
            { path: '', redirectTo: 'welcome', pathMatch: 'full' },
            { path: '**', redirectTo: 'welcome', pathMatch: 'full' }

        ]),

if i do

    { path: 'tab/:id', component: TabComponent }

, this won't work because i will lose my menu items. WelcomeComponent holds both componenets tab and manu

Answer 1

The reason it is not updating is because you are doing this._rout.snapshot.params['id']. You shouldn't be getting a snapshot, but actually subscribe to the activated route, like so:

this._rout.params.subscribe( params => 
{
   this.linkTabID = params["id"];
   // your code continues here
});

You may also be missing a default route for the tab component. If you create a tabs component, then you will be able to do something like this:

RouterModule.forChild([
   { path: 'tabs', component: tabsComponent},
   { path: 'tab/:id', component: LocationComponent }
])

For more details on the children routes, take a look at the section Milestone 3: Heroes feature in this Angular 2 doc for more information.

Answer 2

Not really knowing you app structure, but depending on that, this might be a viable solution (?). Instead of having a welcome component, could you not scrap that and set up a parent with child using router-outlet, so instead of welcome component, your equivalent of your welcome component would look something like this:

{
    path: 'welcome',
    component: NavComponent
    children: [
      {
        path: 'tab/:id',
        component: TabComponent 
      }
    ]
}

This way the communication between NavComponent and TabComponent would work just fine, simplified code:

<div *ngFor="let tab of tabs" (click)="onLinkClick(tab)">{{tab}}</div>

<router-outlet></router-outlet> // tabs gets rendered here

Demo plunker.

UPDATE:

If you want to have a default tab chosen, and know for sure the path, you can set that in the routing:

{
    path: 'welcome',
    component: NavComponent
    children: [
      {
        path: '',
        redirectTo: 'tab/Tab1',
        pathMatch: 'full'
      },
      {
        path: 'tab/:id',
        component: TabComponent 
      }
    ]
}

Forked plunker