如何输入两个路由参数,其中一个在 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 语句。