如何输入两个路由参数,其中一个在 URL 之间用于导航,同时在 Angular CLI 8+ 中使用 Angular 路由器使用子路由
how to input two route parameters one of which is in between the URL for navigation while using children routes in Angular CLI 8+ using Angular Router
我正在尝试导航到提供两个路由参数的页面,如下所示:
author/journals/:journal_Id/draftArticles/:articleId
我知道当路由参数像author/journals/draftArticles/:journal_Id/:articleId, journal_Id, articleId
一样在路由的末尾时可以给出两个参数,这可能会解决我的问题。但我想保持我正在尝试的结构。
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'
}
]
}
]
}
以上是我的路由结构。
AuthorNavComponent
是我的 Sidenav,我还在其中使用另一个路由器插座来显示子路由。我单击的按钮位于 Sidenav 内部,它最终调用 serviceA 中的一个方法,在调用服务器后,该方法将重定向到上面指定的 URL,即 https://localhost:4200/author/journals/:journal_Id/draftArticles/:articleId
如果需要更多信息,请告诉我
更新
我尝试在名为 journalService
的中间使用服务,并创建了一个 BehaviorSubject<any[]>
来传递要导航到的路由。在路由为 author/journals/3
的组件中,我订阅了此 BehaviorSubject<any[]>
并在更改此 BehaviorSubject 的值时导航,并沿相对 ActivatedRoute 传递如下:
期刊组件
this.js.navigateAgain.subscribe(data => {
if (data) {
this.router.navigate(data, {relativeTo: this.activatedRoute});
}
});
其他组件 我从那里更改 BehaviorSubject<any[]>
的值
this.js.navigateAgain.next(['draftArticles', articleId]);
更新 2
也可以使用此生成路由 -> this.router.navigate(['author/journals', journalId, 'draftArticles', articleId]);
但仍然存在以下错误:(
以上技术完美地生成了 URL。但我仍然收到以下错误:
看来,上面描述的路由有问题。
问题中部分提到了上述问题的答案:
Update 2 Route could also be generated using this -> this.router.navigate(['author/journals', journalId, 'draftArticles', articleId]); but still the below error persists
利用这个,我们可以传递两个参数。但是,我使用 router-outlet
来显示子组件。这样,父级显示在主路由器出口中,而子级显示在父级 HTML 模板中提到的后续路由器出口中。上面定义的路由层次结构是这样的:作者(父级)然后是期刊/:journal_Id(子级到作者,父级到后续子级)然后是 draftArticles/:articleId(子级到期刊/:journal_Id)这将显示在它的父级中,为此我不得不在 journals/:journal_Id 组件中提到 router-outlet 标签。
此外,我了解到 pathMatch: 'full'
不应在子路线中提及。现在父组件也将与子组件一起显示,我可以简单地使用 if-else 语句。
我正在尝试导航到提供两个路由参数的页面,如下所示:
author/journals/:journal_Id/draftArticles/:articleId
我知道当路由参数像author/journals/draftArticles/:journal_Id/:articleId, journal_Id, articleId
一样在路由的末尾时可以给出两个参数,这可能会解决我的问题。但我想保持我正在尝试的结构。
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'
}
]
}
]
}
以上是我的路由结构。
AuthorNavComponent
是我的 Sidenav,我还在其中使用另一个路由器插座来显示子路由。我单击的按钮位于 Sidenav 内部,它最终调用 serviceA 中的一个方法,在调用服务器后,该方法将重定向到上面指定的 URL,即 https://localhost:4200/author/journals/:journal_Id/draftArticles/:articleId
如果需要更多信息,请告诉我
更新
我尝试在名为 journalService
的中间使用服务,并创建了一个 BehaviorSubject<any[]>
来传递要导航到的路由。在路由为 author/journals/3
的组件中,我订阅了此 BehaviorSubject<any[]>
并在更改此 BehaviorSubject 的值时导航,并沿相对 ActivatedRoute 传递如下:
期刊组件
this.js.navigateAgain.subscribe(data => {
if (data) {
this.router.navigate(data, {relativeTo: this.activatedRoute});
}
});
其他组件 我从那里更改 BehaviorSubject<any[]>
this.js.navigateAgain.next(['draftArticles', articleId]);
更新 2
也可以使用此生成路由 -> this.router.navigate(['author/journals', journalId, 'draftArticles', articleId]);
但仍然存在以下错误:(
以上技术完美地生成了 URL。但我仍然收到以下错误:
看来,上面描述的路由有问题。
问题中部分提到了上述问题的答案:
Update 2 Route could also be generated using this -> this.router.navigate(['author/journals', journalId, 'draftArticles', articleId]); but still the below error persists
利用这个,我们可以传递两个参数。但是,我使用 router-outlet
来显示子组件。这样,父级显示在主路由器出口中,而子级显示在父级 HTML 模板中提到的后续路由器出口中。上面定义的路由层次结构是这样的:作者(父级)然后是期刊/:journal_Id(子级到作者,父级到后续子级)然后是 draftArticles/:articleId(子级到期刊/:journal_Id)这将显示在它的父级中,为此我不得不在 journals/:journal_Id 组件中提到 router-outlet 标签。
此外,我了解到 pathMatch: 'full'
不应在子路线中提及。现在父组件也将与子组件一起显示,我可以简单地使用 if-else 语句。