routerlink不能重新加載組件

Question

我的welcome.component包含菜單和選項卡，一旦我點擊菜單項routerlink不會啓動一個新的請求，因此，tab組件不會重新加載。標籤組件被多個路由器鏈接調用，並且應該每次都重新加載。

welcome.component.html

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

navMenu.component.html

首次URL = http://localhost:xxxx/welcome

一旦我點擊從navMenu.component.html網址的項目不會改變 http://localhost:53620/tab/2

但是，tab.component需要觸發ngOnInt來重新載入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); 
    } 
} 

它只是重新加載，如果我這樣做是不好的，因爲頁面是空白，則URL永遠不會有，我用它來重新加載數據

<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的ID locLHOSTxxx /歡迎

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

*****************更新************************* **************************

我摘下navMenu.module和tab.module並將th他們所有的app.module

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

     ]), 

，如果我做

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

， 這將無法工作，因爲我將失去我的菜單項。 WelcomeComponent擁有組件選項卡和manu

Answer 1

不是真的知道你的應用程序結構，但根據它，這可能是一個可行的解決方案（？）。相反，有一個值得歡迎的組件，你能不能放棄這一點，設置使用router-outlet與孩子父母，所以不是受歡迎的成分，你對你的歡迎分量相當於將是這個樣子：

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

這樣， NavComponent和TabComponent之間的溝通會工作得很好，簡化代碼：

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

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

Demo plunker.

UPDATE：

如果你想有一個默認選項卡選擇，並肯定知道路徑，您可以設置路由：

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

Forked plunker

Answer 2

它不更新的原因是因爲你在做this._rout.snapshot.params['id']。你不應該得到一個快照，但實際上訂閱激活路線，像這樣：

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

您也可能會丟失的標籤組成的缺省路由。如果你創建一個標籤組件，那麼你就可以做這樣的事情：

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

有關兒童路由的詳細細節，看看部分里程碑3：英雄在this Angular 2 doc功能的更多信息。