Angular 8: Маршрутизируйте двойные вложенные именованные выходы маршрутизатора - PullRequest
Новая
       21

Angular 8: Маршрутизируйте двойные вложенные именованные выходы маршрутизатора

2 голосов
/ 12 октября 2019

Я работаю с Angular 8.3.6 и у меня есть вложенные именованные розетки, которые я бы хотел направить. Мои настройки маршрута выглядят так: 

{
path: 'main',
component: MainComponent,
data: {
  reuseRoute: true
},
children : [
  {
    path: 'lowerone',
    component: LoweroneComponent,
    outlet: 'mainoutlet', data: {
      reuseRoute: true
    },
    children : [
      {
      path: 'loweroneone',
        component: LoweroneoneComponent,
        outlet: 'loweroneoutlet', data: {
          reuseRoute: true
        }
      }
    ]
  }
]
}

Все хорошо, пока я не попытаюсь проложить маршрут до "lowoneone"Я делаю это, вызывая эту строку кода здесь, в основном потому, что я не знаю ничего лучше. 

    this.router.navigate(['/main', { outlets: { mainoutlet: 'lowerone', 
        loweroneoutlet: 'loweroneone' }}]);

Эта строка кода создает следующую ошибку в консоли: 

core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'main'
Error: Cannot match any routes. URL Segment: 'main'
at ApplyRedirects.noMatchError (router.js:4294)
at CatchSubscriber.selector (router.js:4258)
at CatchSubscriber.error (catchError.js:29)
at MapSubscriber._error (Subscriber.js:75)

В консоли я вижу то, что ожидал бы 

url: "/main/(mainoutlet:lowerone//loweroneoutlet:loweroneone)"

Но без кубиков. Кроме того, я должен отметить, что html в компоненте 'lowerone' содержит loweroneoutlet с: 

<p>lowerone works!</p>
<router-outlet name="loweroneoutlet"></router-outlet>

Пример кода на Github можно посмотреть здесь . Любая помощь очень ценится.

...