如何输入两个路由参数，其中一个在导航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的值时进行了导航，如下所示：

日记帐组件

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

似乎上面介绍的路由似乎有问题。

我正在尝试导航到一个提供两个路由参数的页面，如下所示：author / journals /：journal_Id / draftArticles /：articleId我知道当路由参数位于...时可以给出两个参数。

上述问题的答案在问题中的以下部分提及：

更新2路线也可以使用this-> this.router.navigate（['author / journals'，journalId，'draftArticles，articleId]）;但是下面的错误仍然存​​在

使用此参数，我们可以传递两个参数。但是，我使用router-outlet显示子组件。这样，父级显示在主路由器出口中，而子级显示在父级HTML模板中提到的后续路由器出口中。上面定义的路由层次结构如下：作者（父），然后是journals /：journal_Id（子代为作者，父代为子代），然后是draftArticles /：articleId（子代为Journals /：journal_Id），将在其父项中显示必须在journals /：journal_Id组件中提及router-outlet标签。

[此外，我了解到pathMatch: 'full'不应在儿童路线中提及。现在，父组件也将与子组件一起显示，我可以简单地执行if-else语句。

Answer 1

上述问题的答案在问题中的以下部分提及：

更新2路线也可以使用this-> this.router.navigate（['author / journals'，journalId，'draftArticles，articleId]）;但是下面的错误仍然存​​在