![](/img/trans.png)
[英]Change localhost:4200 to something mysite:4200 in Angular 5
[英]Reloading Angular children component takes user to localhost:4200
在我的 Angular 應用程序中,我有一些可能采用路由參數的子組件。 我可以輕松地從父組件重定向到這些子組件,但是當我重新加載子組件時,應用程序導航到localhost:4200
並給出如下路由錯誤。
Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'project-setup/project-setup-steppers'
這是我的路由配置:
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthenticationGuardService] },
{ path: 'project-setup', component: ProjectSetupComponent, canActivate: [AuthenticationGuardService] ,
children: [
{
path: 'project-setup-steppers/:projectId',
component: ProjectSetupSteppersComponent,
canActivate: [AuthenticationGuardService]
},
{
path: 'selfs', component: SelfsComponent, canActivate: [AuthenticationGuardService],
children: [
{
path: 'raters/:selfUserId/:formSetUpKey',
component: RatersComponent, canActivate: [AuthenticationGuardService]
}
]
},
]},
{ path: 'participant-setup', component: ParticipantSetupComponent, canActivate: [AuthenticationGuardService] },
{ path: 'launch-and-status', component: LaunchStatusComponent, canActivate: [AuthenticationGuardService] },
{ path: 'launch-project-desc', component: LaunchProjectDescriptionComponent, canActivate: [AuthenticationGuardService] },
{ path: 'question-setup', component: QuestionSetupComponent, canActivate: [AuthenticationGuardService] },
{ path: 'email-setup', component: EmailSetupComponent, canActivate: [AuthenticationGuardService] },
{ path: 'participant-steppers', component: ParticipantSteppersComponent, canActivate: [AuthenticationGuardService], children: [] },
{
path: 'report-project-list', component: ReportProjectListComponent, canActivate: [AuthenticationGuardService],
children: [
{
path: 'report-project-detail-list/:projectId',
component: ReportProjectDetailListComponent, canActivate: [AuthenticationGuardService]
}
]
},
{ path: 'report-detail/:id/:type', component: ReportDetailComponent, canActivate: [AuthenticationGuardService] },
{ path: 'trial/:projectId', component: TrailRunProjectComponent, canActivate: [AuthenticationGuardService] },
{ path: 'status-of-project/:projectId', component: StatusOfProjectComponent, canActivate: [AuthenticationGuardService] },
{ path: 'project-status-details', component: ProjectStatusDetailsComponent, canActivate: [AuthenticationGuardService] },
{ path: 'news', component: NewsComponent, canActivate: [AuthenticationGuardService] },
{ path: 'view-responses/:assigneeId', component: ViewProjectResponsesComponent, canActivate: [AuthenticationGuardService] },
{ path: 'copy-project/:projectId', component: CopyProjectComponent, canActivate: [AuthenticationGuardService] }
];
我在父組件中使用嵌套的router-outlet
來呈現子組件。 即使用戶從子組件重新加載應用程序,我也想保持相同的路線。
將此添加到您的應用程序路由文件
...
},
{
path: 'report-project-detail-list',
component: ReportProjectDetailListComponent, canActivate: [AuthenticationGuardService]
}
如果您需要可選的,您必須定義帶有和不帶有參數的路由。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.