I am trying to navigate to a page providing two route parameters as follows:
author/journals/:journal_Id/draftArticles/:articleId
I know that two parameters can be given when route parameter is at the end of the route like author/journals/draftArticles/:journal_Id/:articleId, journal_Id, articleId
and this will probably solve my issue. But I wanted to maintain the structure I am trying.
path: 'author',
canActivate: [AuthGuardService],
canActivateChild: [AuthorGuard],
component: AuthorNavComponent,
children: [
{
path: '',
component: AuthorDashboardComponent,
pathMatch: 'full'
},
{
path: 'profile',
component: AuthorProfileComponent,
pathMatch: 'full'
},
{
path: 'journals/:journal_Id',
component: JournalPublicPageComponent,
pathMatch: 'full',
children: [
{
path: 'draftArticles', children: [
{
path: ':articleId',
component: DraftArticleComponent,
pathMatch: 'full'
},
{
path: '',
component: DraftArticlesComponent,
pathMatch: 'full'
}
]
},
{
path: 'articles', children: [
{
path: '',
component: ArticlesComponent,
pathMatch: 'full'
},
{
path: ':articleId',
component: ArticleComponent,
pathMatch: 'full'
}
]
}
]
}
Above is the structure my routes.
AuthorNavComponent
is my Sidenav within which I am also using another router-outlet for showing children routes. The button that I am clicking is inside the Sidenav which ultimately calls a method in serviceA which will, after making a call to server, redirect to the above specified URL i.e. https://localhost:4200/author/journals/:journal_Id/draftArticles/:articleId
Please let me know if any more information is required
Update
I tried using service in the middle named journalService
and created a BehaviorSubject<any[]>
to pass in the route of to navigate to. In the component whose route is author/journals/3
, I subscribed to this BehaviorSubject<any[]>
and navigated upon changing the value of this BehaviorSubject passing along relative ActivatedRoute as follows:
Journal Component
this.js.navigateAgain.subscribe(data => {
if (data) {
this.router.navigate(data, {relativeTo: this.activatedRoute});
}
});
Other Component From where I am changing the value of BehaviorSubject<any[]>
this.js.navigateAgain.next(['draftArticles', articleId]);
Update 2
Route could also be generated using this -> this.router.navigate(['author/journals', journalId, 'draftArticles', articleId]);
but still the below error persists :(
Above technique generated the URL perfectly. But I still get the following error:
It seems like, there is something wrong with the routing described far above.
Answer to the above question is partially mentioned within the question at:
Update 2 Route could also be generated using this -> this.router.navigate(['author/journals', journalId, 'draftArticles', articleId]); but still the below error persists
Using this, we can pass two parameters. However, I used router-outlet
for displaying child component. Such that, parent is shown in the main router-outlet while the children are shown in the subsequent router-outlets mentioned within the HTML templates of parent. The routing hierarchy defined above is like: author (parent) then journals/:journal_Id (child to author, parent to onward children) then draftArticles/:articleId (child to journals/:journal_Id) which will be shown in its parent for which I had to mention router-outlet tag in journals/:journal_Id component.
Also, I learned that pathMatch: 'full'
should not be mentioned in children routes. Now that parent component will also be showing along with the child component, I could simply if-else statement.