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

Solution 1

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

Solution 2

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.

Comments

[rgoal]

there is still an issue here i see duplicate content in the tab.component.html, using your plunker if you had a button in the child component , the first time will load you will see a button by it self which is fine, however, if you click on a menu itiem you will see two buttons. so you always have duplicate content

[AT82]

Could you fork the plunker and recreate the issue there, hard to help without seeing code :)

[rgoal]

thanks alot for the plunker it really helped me narrow the issue :) I updated the plunker and the issue once it is first loaded I need to show a default tab like the first tabd is clicked, looking at the plunker I updated the nav.component to call the child by default which it shows the submit button and label (it's ok) but once you click in another tab it will duplicate the label and button. Can I avoid that?

[AT82]

Looked for the forked plunker for a while, but I saw you posted it in the other answer :D Check my updated answer, you can redirect the user to the tab of your choosing by making some changes in the routing :)

[rgoal]

Thank you so much your plunker lead me to find he other issues I was having with routing

[AT82]

Great, you are welcome. Sometimes a plunker is very helpful, you might find your own errors by trying to reproduce the issue as well ! :)