Маршрутизация с параметрами в Angular - PullRequest
Новая
       28

Маршрутизация с параметрами в Angular

0 голосов
/ 20 февраля 2019

У меня проблемы с настройкой маршрутизации.Логика моего приложения - у меня есть выпадающий заголовок, который управляет навигацией.Параметры раскрывающегося списка позволяют перейти на страницу с дополнительной панелью навигации под раскрывающимся списком.Параметр маршрутизации проходит, когда вы нажимаете на опцию выпадающего списка.Проблема в том, что мне нужно загрузить компонент, который не находится на панели навигации, но используется как экран по умолчанию после раскрывающегося списка навигации.

Первый навигационный «слой» - это раскрывающийся список.После этого URL будет index / Param # .

Вторым навигационным «слоем» является навигационная панель, которая загружается на страницы с URL index / Param # .На этих страницах у меня есть компонент («экран по умолчанию»), который загружается, когда url равен index / Param # .Но у этого компонента нет ссылок на панели навигации.

Когда я нажимаю ссылки на навигационной панели, URL становится index / Param # / params или index / Param # / results и т. Д. Логика моего приложения

App-routing.module.ts 

const routes: Routes = [
   { path: '', component: MainComponent },
   { path: 'stages', component: StagesComponent }
];

Stages-routing.module.ts 

const routes: Routes = [
{ path: 'stages', component: StagesComponent, children: [
    { path: ':name', component: StageComponent },
    { path: 'programm', component: ProgrammComponent },
    { path: 'jury', component: JuryComponent },
    { path: 'finalists', component: FinalistsComponent },
    { path: 'results', component: ResultsComponent },
    { path: 'photo', component: PhotoComponent },
    { path: 'partners', component: PartnersComponent },
    { path: 'contacts', component: ContactsComponent},
    ]}
];

myService.ts 

navigateTo(selectedItem) {
      this.router.navigate(['stages', selectedItem]);
     // selectedItem is dropdown value
  }

Например, при переходе к «программированию» Angular не может разрешить этот путь.Что мне делать?

Ответы [ 2 ]

0 голосов
/ 05 августа 2019

в основном то, что вы здесь сделали, это то, что все маршруты ведут к stages/:name, а другие маршруты ниже них никогда не доступны, и вам нужно удалить только эту строку{ path: ':name', component: StageComponent } и все будет работать как положеноrender StagesComponent и другие маршруты никогда не затрагиваются.

Вы можете добавить эту строку кода в конец массива childrend, это означает, что сначала он будет проверен, если 

'stages/programm' if isn't this route go to next one
'stages/jury' if isn't this route go to next one 
...
// and so one till the end of array
// and if no child routes find then will display default component which is 'StageComponent' 

// so your routes array should be something like this
const routes: Routes = [
{ path: 'stages', component: StagesComponent, children: [
    { path: 'programm', component: ProgrammComponent },
    { path: 'jury', component: JuryComponent },
    { path: 'finalists', component: FinalistsComponent },
    { path: 'results', component: ResultsComponent },
    { path: 'photo', component: PhotoComponent },
    { path: 'partners', component: PartnersComponent },
    { path: 'contacts', component: ContactsComponent},
    { path: ':name', component: StageComponent }, // if no child routes found then display default
    ]}
];

Or you can delete this line and if user write anything else that you have in children array then redirect it to 404 page .
For more info please read docs on Angular https://angular.io/guide/router they have really good explanation of how things works in angular.
0 голосов
/ 20 февраля 2019

Добавить / после stages решит вашу проблему.

navigateTo(selectedItem) {
      this.router.navigate(['stages/', selectedItem]);
     // selectedItem is dropdown value
  }

Надеюсь, это поможет!

...