Angular: вложенный роутер-розетка всегда игнорируется - PullRequest
Новая
       7

Angular: вложенный роутер-розетка всегда игнорируется

0 голосов
/ 24 ноября 2018

Есть ли у вас идеи, что может быть не так с моим configuratoin, если мой второй маршрутизатор-розетка всегда игнорируется?Вот моя маршрутизация app.module (app.component имеет один маршрутизатор-выход): 

const routes: Routes = [
  {
    path: 'home',
    loadChildren: './home/home.module#HomeModule',
    canLoad: [AuthorizationGuard]
  },
  {
    path: 'please-login',
    component: PleaseLoginComponent
  },
  {
    path: '**',
    redirectTo: 'please-login'
  }
];

А вот моя home.module-маршрутизация (HomeComponent имеет другой маршрутизатор-выход): 

RouterModule.forChild([
  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent,
    children: [
      {
        path: 'welcome',
        component: WelcomeComponent
      }
    ]
  },
  {
    path: '**',
    redirectTo: 'welcome'
  },
  {
    path: 'Data',
    loadChildren: '@libs/data#DataModule'
  }
]),

Я могу загрузить DataModule без проблем;он направляет меня в / home / data / blabla.Но (!) Он вставляет DataComponent в первый маршрутизатор-розетку.Второй (и, следовательно, весь HomeComponent, который должен окружать DataComponent) игнорируется.То есть, если я не перехожу к / home, он отображается, но, как и ожидалось, без компонента DataComponent внутри.Это означает, что я могу использовать оба компонента только по отдельности, а не как вложенный.

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

1 Ответ

0 голосов
/ 24 ноября 2018

Чтобы загрузить DataComponent в router-outlet HomeComponent (что означает, что вам также необходимо добавить <router-outlet></router-outlet> к вашему HomeComponent шаблону), вам нужно будет сделать data какпотомок пути ''.

Еще одна вещь, которую вам нужно сделать, это удалить pathMatch: 'full' с вашего маршрута ''.Что бы он сделал, попробуйте сопоставить путь в чанках, то есть, если '' сопоставлено, он попытается проверить любые подходящие дочерние маршруты.

Наконец, я не уверен, что это опечаткаили нет, но путь должен быть data, а НЕ Data.

Все это будет переводиться в код, похожий на этот: 

RouterModule.forChild([
  {
    path: '',
    component: HomeComponent,
    children: [
      {
        path: 'data',
        loadChildren: '@libs/data#DataModule'
      },
      {
        path: 'welcome',
        component: WelcomeComponent
      },
      {
        path: '**',
        redirectTo: '/welcome',
        pathMatch: 'full'
      }
    ]
  },
  ...
]),
...