Проблемы в маршрутизации угловых компонентов - PullRequest
Новая
       25

Проблемы в маршрутизации угловых компонентов

0 голосов
/ 18 июня 2019

Я определил дочерний компонент маршрутизации.

  1. Я не могу перейти к маршрутизации по умолчанию из routerLink.
  2. Родительский путь имеет «: id», поэтому для маршрутизации детей он работает только с префиксом «: id».

Маршрут 

{
    path: ':id', component: InterviewComponent,
    children: [                          
      {
        path: '',
        component: InterviewQuestionsComponent
      },
      {
        path: ':id/interview',
        component: InterviewGridComponent
      }
    ]

  }

Якорные метки 

<ul class="list-unstyled components">
      <li>
        <a routerLink=""><i class='interviewQuestions'></i>&nbsp; <span style="cursor: pointer;">Interview Questions</span></a>
      </li>
      <li>
        <a routerLink=":id/interview"><i class='interviews'></i>&nbsp; <span style="cursor: pointer;">Interviews</span></a>
      </li>
    </ul>

<router-outlet></router-outlet>
  1. Я не могу перейти к маршрутизатору по умолчанию с параметром routerLink = "" '
  2. Маршруты работают только с "path: ': id / интервью'"

1 Ответ

0 голосов
/ 18 июня 2019

Есть пара вещей, которые я здесь наблюдал,

  1. , если я правильно вас понимаю, то, что вы пытаетесь сделать, это

    / 1 должен отображать InterviewQuestionsComponent

    / 1 / интервью должен отображать InterviewGridComponent

верно?поправьте меня, если я ошибаюсь.

если это то, что вы хотите, то измените ваши маршруты с помощью ниже, 

{
path: ':id', component: InterviewComponent,
children: [                          
  {
    path: '',
    component: InterviewQuestionsComponent
  },
  {
    path: 'interview',
    component: InterviewGridComponent
  }
]
}
Для перехода к каждому из этих компонентов вам понадобится 'id', который является параметром пути, поэтому то, что вы сделали в routerLink, неверно.

измените его, как показано ниже, 

<ul class="list-unstyled components">
  <li>
    <a routerLink="1"><i class='interviewQuestions'></i>&nbsp; <span style="cursor: pointer;">Interview Questions</span></a>
  </li>
  <li>
    <a routerLink="1/interview"><i class='interviews'></i>&nbsp; <span style="cursor: pointer;">Interviews</span></a>
  </li>
</ul>

Здесь у меня есть жестко закодированный '1' в пути, вы можете сделать его динамическим, используя угловые привязки.Вот рабочий пример стекаблица.

https://stackblitz.com/edit/angular-wipkyq

...