Блог

Я хотел бы использовать вспомогательную маршрутизацию Angular для (очень больших) боковых меню инструмента администрирования (используя угловую ветку 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'}
];
  

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

 <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>
  

И маршрутизация модуля person :

 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'},
];
  

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

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

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

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

И в TS :

 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) , ни одна из ссылок на third не работает. Ссылка, сгенерированная 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).

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

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

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

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