时间戳

首页 > 解决方案 > 如何输入两个路由参数，其中一个在 URL 之间进行导航，同时使用 Angular CLI 8+ 中的子路由使用 Angular Router

angular - 如何输入两个路由参数，其中一个在 URL 之间进行导航，同时使用 Angular CLI 8+ 中的子路由使用 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 /:文章ID

如果需要更多信息，请告诉我

更新

我尝试使用中间命名的服务journalService并创建了一个BehaviorSubject<any[]>以传递导航到的路径。在路由为 的组件中author/journals/3，我订阅了它BehaviorSubject<any[]>并在更改此 BehaviorSubject 的值时进行导航，该 BehaviorSubject 沿相对 ActivatedRoute 传递，如下所示：

日记帐组件

this.js.navigateAgain.subscribe(data => {
      if (data) {
        this.router.navigate(data, {relativeTo: this.activatedRoute});
      }
    });

其他组件我要更改的值BehaviorSubject<any[]>

this.js.navigateAgain.next(['draftArticles', articleId]);

也可以使用此生成更新 2this.router.navigate(['author/journals', journalId, 'draftArticles', articleId]);路线 ->但仍然存在以下错误:(

上述技术完美地生成了 URL。但我仍然收到以下错误：

错误

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

标签： angularangular-routerangular9angular-router-params

解决方案

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

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

推荐阅读