我的路由配置如下:
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>
最佳答案
未加载新内容的原因是您正在使用 ActivatedRoute "params"
,这是一个 Observable,因此当您导航到同一组件时,路由器可能不会重新创建该组件。在您的情况下,参数正在更改而无需重新创建组件。
所以尝试这种解决方案
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();
}
}
我希望这对你有用:)
关于加载第一个子路由后,Angular2 路由不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41154382/