Угловые ленивые детские маршруты с розеткой - PullRequest
Новая
       16

Угловые ленивые детские маршруты с розеткой

1 голос
/ 12 марта 2019

Я пытался воспроизвести мою ошибку в stackblitz

Что я пытаюсь выполнить

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

Я хочу, чтобы дочерние маршруты выводились в другой выход маршрутизатора.

В частности, я хочукомпонент (UserComponent), загруженный по маршруту user/:username - если путь пуст после :username Я хочу загрузить UserDefaultContentComponent в маршрутизатор, определенный внутри UserComponent - Если путь имеет расширение, напримерuser/some-user/other Я хочу, чтобы UserOtherComponent загрузился в розетку.Но ВСЕГДА загружено UserComponent на user/:username - пример user/some-user

Теории того, что ломает это

Так что конфигурация, которую я создал, я получаю ошибкикогда я пытаюсь разрешить дочерние маршруты.Я смог загрузить UserComponent по пустому пути пользователя без отложенной загрузки.

Я также думаю, что наличие статических маршрутов в динамическом маршруте :username вызывает проблему.

Конфигурация

Полный код см. stackblitz

Ниже приведен код, который я считаю релевантным.Пожалуйста, прокомментируйте, если я что-то здесь упускаю:

Маршрутизация приложений (корневая маршрутизация) 

const APP_ROUTES: Routes = [
    { path: '', component: AppComponent, data: { state: 'home' }},
    { path: 'user/:username', loadChildren: './user-module/user.module#UserModule'}
];

export const appRouting = RouterModule.forRoot(APP_ROUTES);

Пользовательские маршруты (дочерняя маршрутизация) 

const USER_ROUTES: Routes = [
    { path: '', component: UserComponent, children: [
      { path: '', component: UserDefaultContentComponent, outlet: 'user-outlet'},
      { path: 'other', component: UserOtherComponent, outlet: 'user-outlet'},
    ]}
];

export const userRouting = RouterModule.forChild(USER_ROUTES);

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

UserComponent - содержит названный выход маршрутизатора: 

<div>
  THIS IS A USER
</div>

<router-outlet name="user-outlet"></router-outlet>

URL-адреса для проверки

Этот URL-адрес должен загрузить UserOtherComponent: /user/hello/other Этот URL-адрес долженload UserDefaultContentComponent: /user/hello Оба должны загружаться внутри названной розетки-маршрутизатора - поэтому в обоих случаях должен загружаться UserComponent.

Я получаю этот вывод на консоль, когда пытаюсь загрузить UserOtherComponent (или любой определенный подпуть):

ОШИБКА: Uncaught (в обещании): Ошибка: не удается сопоставить ни один маршрут.Сегмент URL: 'user / hello / other' Ошибка: невозможно сопоставить ни один маршрут.Сегмент URL: 'user / hello / other'

Хотя при пустом суб-маршруте я не получаю ошибку консоли, но UserComponent не загружен.В моем собственном проекте (не это воспроизведение) я загружаю UserComponent - я не могу понять, почему пустой путь работает в моем собственном проекте.Может быть, эта информация полезна.

РЕДАКТИРОВАТЬ:

Добавлен отсутствующий выход маршрутизатора в компоненте приложения.Теперь я вернулся к той проблеме, которая возникла в моем полном проекте.

маршрут user/user отображает UserDefaultContentComponent.user/user/other все еще не работает

1 Ответ

1 голос
/ 12 марта 2019

Вы забыли добавить <router-outlet></router-outlet> в ваш app.component.html

РЕДАКТИРОВАТЬ:

обновить свой APP_ROUTES

const APP_ROUTES: Routes = [
    { path: '', component: HelloComponent, data: { state: 'home' }},
    { path: 'user', loadChildren: './user-module/user.module#UserModule'}
];

и ваш USER_ROUTE

const USER_ROUTES: Routes = [
    { path: ':username', component: UserComponent, children: [
      { path: '', component: UserDefaultContentComponent},
      { path: 'other', component: UserOtherComponent},
    ]}
];

И заменить 

<router-outlet name="user-outlet"></router-outlet>

по 

<router-outlet></router-outlet>

enter image description here

...