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

Marcos Silva · Accepted Answer · 2017-03-01 04:04:32Z

11

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.

edited Mar 1, 2017 at 4:04

answered Mar 1, 2017 at 1:23

Marcos Silva

2,0591 gold badge20 silver badges25 bronze badges

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

6 Comments

rgoal Over a year ago

i get undefined for this.id? also the issue using <a (click)="onLinkClick"('/tab',menu.LinkTabID)" > instead of <a [routerLink]="['/tab',menu.LinkTabID]"> is the page will flicker with empty content for few seconds then the content appear , which does not look good.

rgoal Over a year ago

I think it is null because url will be localhostxxxx/welcome not localhostxxx/tab/4

Marcos Silva Over a year ago

@rgoal Your local variable is actually this.linkTabID. I adjusted my notes. Take a look.

rgoal Over a year ago

I have already done that, same issue. what the expected url should be localhostxxxx/welcome or localhostxxx/tab/4? I get localhostxxxx/welcome

Marcos Silva Over a year ago

@rgoal I added additional information that may be of help. I suggest you to follow the steps outlined in the Angular 2 document for routing. I added a link for that.

|

AVJT82 · Accepted Answer · 2017-03-03 10:18:37Z

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

edited Mar 3, 2017 at 10:18

answered Mar 1, 2017 at 10:22

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

6 Comments

rgoal Over a year ago

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

AVJT82 Over a year ago

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

rgoal Over a year ago

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?

AVJT82 Over a year ago

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 Over a year ago

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

|

Collectives™ on Stack Overflow

routerlink not reloading component

2 Answers 2

6 Comments

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

6 Comments

Related