Угловая вспомогательная маршрутизация не работает изнутри модулей - PullRequest
Новая
       19

Угловая вспомогательная маршрутизация не работает изнутри модулей

0 голосов
/ 06 марта 2019

Я бы хотел использовать угловую вспомогательную маршрутизацию для (очень больших) боковых меню инструмента администрирования (с использованием угловой ветви 7.2.X). После нескольких дней испытаний с ужасно сложным маршрутизатором Angular, я смог заставить URL работать правильно. Но когда я пытаюсь выполнить маршрутизацию между компонентами во вспомогательных выходах, у меня очень странное поведение ...

Эскизы приложений, полученные от дизайнеров, довольно стандартные: одно общее фиксированное меню в верхней части, динамическое боковое меню слева и второе динамическое боковое меню справа.

Мой модуль маршрутизации приложений в данный момент выглядит примерно так: 

const appRoutes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'person', component: MainComponent, loadChildren: 'app/person/person.module#PersonModule'},
  // several other modules, some eager loaded, other lazy loaded
  {path: '**', redirectTo: '/login'}
];

MainComponent содержит первичные и именованные выходы маршрутизатора для различных модулей: 

<div class="main-container">
  <div class="left-container">
    <router-outlet name="left"></router-outlet>
  </div>
  <div class="middle-container">
    <router-outlet></router-outlet>
  </div>
  <div class="right-container">
    <router-outlet name="right"></router-outlet>
  </div>
</div>

И персональный модуль маршрутизации: 

const PERSON_ROUTES: Routes = [
  {path: 'display', component: PersonDisplayComponent},
  {path: 'first', component: MenuTestFirstComponent, outlet: 'right'},
  {path: 'second', component: MenuTestSecondComponent, outlet: 'right'},
  {path: 'third', component: MenuTestThirdComponent, outlet: 'right'},
  {path: '', component: MenuTestFirstComponent, outlet: 'right'},
  {path: '' pathMatch: 'full', redirectTo: 'display'},
];

Все эти маршруты работают правильно (первые два отображают одно и то же из-за вспомогательного маршрута по умолчанию):

  • / человек / дисплей
  • / чел / (дисплей // правильно: первый)
  • / чел / (дисплей // правильно: вторая)
  • / чел / (дисплей // правильно: третий)

Теперь к проблемам! Мне нужно проложить маршрут между этими меню (у первого есть ссылка на маршрут, у второго - у второго есть ссылка на маршрут до третьего). Код, который я поместил в компоненты меню, следующий (здесь первый, но похож на второй, чтобы перейти к третьему): 

<p><a [routerLink]="[{outlets:{right:['second']}}]">Second (routerLink)</a></p>
<p><a (click)="routeToSecond()">Second (route.navigate)</a></p>

А в ТС: 

public routeToSecond(){
  this.router.navigate([
    {
      outlets: {
        right: ['second'],
      }
    }
  ]);
}

Проблема в том, что когда я на /person/display, первое меню (которое по умолчанию) отображается правильно. routerLink способ маршрутизации - правильно добавить ссылку на /person/(display//right:second). Однако при маршрутизации (clic) происходит ошибка маршрутизатора: 

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'second'
Error: Cannot match any routes. URL Segment: 'second'

Маршрут, который я попросил routerLink и router.navigate, строго одинаков, но до сих пор работает один способ маршрутизации, а последний - нет.

Вторая проблема, когда я на /person/(display//right:second), ни одна из ссылок на третью не работает. Сгенерированная routerLink ссылка странная: 

/person/(display//right:second/(right:third))

Я бы ожидал, что routerLink - заменит right:second часть для right:third вместо добавит часть к вспомогательному URL.

Относительно маршрутизации router.navigate я получаю похожую ошибку: 

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'third'
Error: Cannot match any routes. URL Segment: 'third'

Большинство примеров вспомогательной маршрутизации, которые я нашел путем поиска в Google, имеют существенные различия с моим вариантом использования. Они либо слишком просты (обычно только с одним AppModule), либо маршрутизирующие ссылки на вспомогательные выходы находятся за пределами модулей (в компонентах AppModule).

В моем случае действия в боковых меню могут изменять содержимое меню, а не только статическое меню верхнего уровня.

Я подготовил пример стекаблика настолько простым, насколько я мог воспроизвести то, что я описываю.

Возможно, я пропустил некоторую основную информацию о вспомогательной маршрутизации (или, в более общем смысле, об Angular router и маршрутизации, это совсем не просто). Если у вас есть идея решить мою проблему с маршрутизацией, это было бы здорово. Не стесняйтесь клонировать мой пример stackblitz, чтобы показать рабочий пример. Рефакторинг столько, сколько вы хотите, если вам нужно изменить модуль и / или структуру компонентов. Вспомогательной маршрутизации в сложной ситуации действительно не хватает подробной документации, поэтому, если ваш ответ может содержать какое-то объяснение, это было бы еще более круто.

Спасибо всем, кто дочитал до этого момента: -)

...