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

Question

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 ie 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 1

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.