그래서 저는 유명한 각도 라우팅 문제에 직면했습니다 . "지연로드 모듈이있는 콘센트" . 이 문제는 종결 된 것으로 보이며이 사람은 내가 따라온 작업 솔루션을 제공했습니다 . 그러나 여전히 오류가 발생하고이 문제의 본질을 이해할 수 없습니다.
오류 : 경로와 일치 할 수 없습니다. URL 세그먼트 :
다른 구성 요소에 대한 리디렉션 경로가 다른 pathMatch : 'full'을 사용하려고 시도했지만 결국 항상 동일한 오류가 발생합니다.
나는 이미 몇 시간 동안 갇혀 있기 때문에 여기서 질문하기로 결정했습니다. 내 문제는 어디에 있고 무엇을 놓치고 있습니까?
내 설정
app.routing.ts :
const routes: Routes = [
{
path: '',
loadChildren: 'app/home/home.module#HomeModule',
},
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
},
{
path: 'data',
loadChildren: 'app/data/data.module#DataModule',
},
{
path: '**',
redirectTo: ''
}
];
app.component.html
<app-header></app-header>
<router-outlet></router-outlet>
data.routing-module.ts
const routes: Routes = [
{
path: 'summary',
component: SummaryComponent,
canActivate: [AuthGuard],
},
{
path: 'management/:id',
component: DataComponent,
canActivate: [AuthGuard],
children: [
{
path: 'activities',
component: ActivitiesComponent,
outlet: 'activities',
},
{
path: 'researches',
component: ResearchesComponent,
outlet: 'researches',
}
]
},
{
path: 'review/:id',
component: InfoComponent,
canActivate: [AuthGuard],
},
];
data.component.html
<mat-drawer-container class="docs-viewer-container">
<mat-drawer position='start' [mode]='mode'>
<router-outlet name="activities"></router-outlet>
</mat-drawer>
<mat-drawer position='end' [mode]='mode'>
<router-outlet name="researches"></router-outlet>
</mat-drawer>
<mat-drawer-content>
...
// content
...
</mat-drawer-content>
</mat-drawer-container>
따라서 데이터 모듈의 랜딩 페이지는 사용자가 URL 경로를 탐색하기 위해 링크를 클릭 한 후 요약 구성 요소 'path/data/summary?params'
입니다. Summary.component에는 탐색 기능이 있습니다.
onActivitySelection(event) {
this.queryParams.offset = 0;
this.queryParams.limit = 25
this.router.navigate([{
outlets: {
'activities': '/data/management/' + event.id + '/activities'
}
}],
{
queryParams: this.queryParams
})
}
보시다시피 리디렉션 경로는 '/ data / management / : id / activities'여야합니다. 그러나 오류는이 경로를 찾을 수 없다고 말합니다.
누구든지 내 문제로 나를 도울 수 있습니까?
색인 구성 요소에 모듈의 경로를 포함 해보십시오. 앱 모듈에 대한 라우터 콘센트가 있지만 그 아래 수준은 없습니다.
데이터 모듈의 경로 :
{
path: '', component: DataIndexComponent, canActivate: [AuthGuard],
children: [
{
path: 'summary',
component: SummaryComponent
},
...[restOfRoutes]
]
}
DataIndexComponent 내에서 <router-outlet></router-outlet>
.
다른 참고로, 동일한 인증 가드를 사용하는 경우 모듈의 인덱스 수준에 배치 할 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다