angular маршрутизатор с несколькими именами на пустом пути в ленивых загружаемых модулях - PullRequest
Новая
       96

angular маршрутизатор с несколькими именами на пустом пути в ленивых загружаемых модулях

0 голосов
/ 05 августа 2020

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

У меня минимальное воспроизведение проблемы в этом stackblitz .

Обратите внимание, что это воспроизведение, предварительным условием в моем проекте является наличие двух или более пустых путей, которые разрешались бы в разные вспомогательные маршруты, поскольку у меня есть «главная» страница с несколькими вспомогательными маршрутами, каждый из которых отображает часть страницы.

Соответствующий код для основного компонента: 

<nav>
  <a routerLink="/home" routerLinkActive="active">Home Link</a>
  <a routerLink="/about" routerLinkActive="active">About (lazy) link </a>
  <router-outlet name="about"></router-outlet>
</nav>

<router-outlet></router-outlet>

app.routing.module: 

const routes: Routes = [
  { 
    path: 'home', 
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
  },
  { 
    path: '', 
    loadChildren: () => import('./comp/comp.module').then(m => m.CompModule),
  },
  { 
    path: '', 
    loadChildren: () => import('./about/about.module').then(m => m.AboutModule),
  }
];

comp.routing.module 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CompComponent } from './comp.component';

const routes: Routes = [
  { path: '', component: CompComponent, outlet: 'comp' },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class CompRoutingModule { }

about.routing.module 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AboutComponent } from './about.component';

const routes: Routes = [
  { path: '', component: AboutComponent, outlet: 'about' },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class AboutRoutingModule { }

обратите внимание, что если я поставлю 

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

вместо 

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

, он будет работать, как если бы я инвертировал порядок маршрутов в app.routing.module

EDIT

я могу убрать ленивую загрузку из уравнения, рефакторинг маршрута таким образом 

const routes: Routes = [
  { 
    path: 'home', 
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
  },

  { 
    path: '', 
    loadChildren: () => import('./comp/comp.module').then(m => m.CompModule),
  },
  
  /*
  { 
    path: '', 
    loadChildren: () => import('./about/about.module').then(m => m.AboutModule),
  },
  */
  { 
    path: '', 
    children: [{
      path: '',
      component: AboutComponent, 
      outlet: 'about' 
    }]
  }

];

так очевидно, что у меня несколько не могут быть разные дети Танцы для того же (пустого) маршрута

спасибо за любое предложение

...