第一個孩子航線後Angular2路由工作不被加載

我的路由配置方式如下：第一個孩子航線後Angular2路由工作不被加載

RouterModule.forRoot([ 
    { path: '', redirectTo: 'main', pathMatch: 'full' }, 
    { path: 'main', component: SummaryComponent, children: [ 
     { path: 'data/:deviceId/:incidentId', component: DeviceMetricsComponent }, 
     { path: 'incident/analysis/:incidentId', component: IncidentAnalysisComponent }, 
     ] 
    }, 
    { path: 'test', component: TestFullPageComponent, children: [ 
     { path: 'test2', component: TestFullPageChildComponent} 
     ] 
    }, 

    { path: 'logs/jobs/:jobtype', component: JobLogsComponent, pathMatch: 'full' }, 
    { path: '**', redirectTo: 'main' } 
])

這裏是我的「主」模板：

<div class="row"> 
    <div class="col-md-12"> 
     <!-- Some links are in this table that load into the router-outlet below --> 
     <app-incident-node-table [tableTitle]="incidentNodeTableTitle" [parentSubject]="incidentNodesSubject"></app-incident-node-table> 
    </div> 
</div> 
<div class="row" style="margin-top: 500px;"> 
    <div class="col-md-12"> 
     <div id="childResult"> 
      <router-outlet></router-outlet> 
     </div> 
    </div> 
</div>

當我第一次導航到頁面並單擊一個鏈接，它按預期加載到<router-outlet>。在那一點上我的網址變得像http://localhost:4200/main/incident/analysis/3816913766390440113。

該表中的任何其他鏈接都會顯示不同的URL，但是一旦單擊它們，新內容就不會加載到<router-outlet>中。

編輯： 在IncidentNodeTable模板中的鏈接看起來是這樣的：

<span><a pageScroll [pageScrollOffset]="60" [routerLink]="['/main/incident/analysis', row.IncidentId]">Analyze</a></span>

來源

2016-12-15 blgrnboy

原因新的內容沒有被加載時您正在使用ActivatedRoute "params"這是可觀察到的那麼路由器可能不會重現組件導航到相同的組件時。在你的情況下，參數正在改變，沒有重新創建組件。因此，嘗試這種解決方案

export class IncidentAnalysisComponent implements OnInit, OnDestroy { 
     id: number; 
     limit: number; 
     private sub: any; 

     constructor(private route: ActivatedRoute) {} 

     ngOnInit() { 
     this.sub = this.route.params.subscribe(params => { 
      this.id = +params['id']; 
      this.limit = 5; // reinitialize your variable 
      this.callPrint();// call your function which contain you component main functionality 
     }); 
     } 
    ngOnDestroy() { 
     this.sub.unsubscribe(); 
    } 
}

我希望這會爲你工作:)

來源

2016-12-15 01:20:41

第一個孩子航線後Angular2路由工作不被加載

回答

相關問題