как ввести два параметра маршрута, один из которых находится между URL для навигации при использовании дочерних маршрутов в Angular CLI 8+ с использованием Angular Router - PullRequest
Новая
       44

как ввести два параметра маршрута, один из которых находится между URL для навигации при использовании дочерних маршрутов в Angular CLI 8+ с использованием Angular Router

1 голос
/ 12 апреля 2020

Я пытаюсь перейти на страницу с двумя параметрами маршрута следующим образом:

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[]> и перешел к изменению значения этого объекта поведения, передающего относительный 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 отлично. Но я все еще получаю следующую ошибку:

Error

Кажется, что с маршрутизацией, описанной выше, что-то не так.

1 Ответ

0 голосов
/ 13 апреля 2020

Ответ на вышеуказанный вопрос частично упоминается в вопросе по адресу:

Обновление 2 Маршрут также можно создать с помощью this -> this.router.navigate (['author / journals', journalId , 'draftArticles', articleId]); но все еще ошибка ниже сохраняется

Используя это, мы можем передать два параметра. Однако я использовал router-outlet для отображения дочернего компонента. Таким образом, родительский элемент отображается в главном выходном маршрутизаторе, а дочерние - в последующих выходных маршрутизаторах, упомянутых в шаблонах HTML родительского элемента. Определенная выше иерархия маршрутизации имеет вид: author (parent), затем journals /: journal_Id (потомок автора, потомок потомков), затем draftArticles /: articleId (потомок журналов /: journal_Id), который будет показан в его родительском элементе, для которого я должен был упомянуть метку router-outlet в компоненте journals /: journal_Id.

Также я узнал, что pathMatch: 'full' не следует упоминать в детских маршрутах. Теперь этот родительский компонент также будет отображаться вместе с дочерним компонентом, я мог бы просто выполнить оператор if-else.

...