如何输入两个路由参数，其中一个在 URL 之间用于导航，同时在 Angular CLI 8+ 中使用 Angular 路由器使用子路由

Question

我正在尝试导航到提供两个路由参数的页面，如下所示：

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。但我仍然收到以下错误：

看来，上面描述的路由有问题。

Answer 1

问题中部分提到了上述问题的答案：

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 语句。

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

angular

angular-router

angular9

angular-router-params