Дочерний маршрут с тем же путем

Question

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

У меня есть два модуля:

AppModule (sets forRoot routes) -> AppComponent, LayoutComponent
ContentModule (sets forChild routes) -> ContentComponent

AppComponent.html:

<router-outlet></router-outlet>

Маршруты AppModule:

{path: '', component: LayoutComponent}

LayoutComponent.html:

This is a layout:
<content-component></content-component>

Маршруты ContentModule:

{path: '', component: ContentComponent}

ContentComponent.html:

<router-outlet></router-outlet>

---

Так что, в основном, я хочу, чтобы макет с LayoutComponent всегда был там, если путь начинается с /, а затем загружается ContentComponent, если он все еще /. Когда я добавляю новый компонент в ContentModule и устанавливаю новый маршрут, затем, например, /childcomponent, я хочу загрузить новый ChildComponent в router-outlet.

Я что-то упустил? Что здесь не так?

Answer 1

Вам необходимо установить в ContentModule маршруты для Child и передать туда компонент с router-outlet. После этого места появилось свойство children с массивом маршрутов.

@NgModule({
...
  imports: [....,
    RouterModule.forChild(ContentRoutes)
....]...

файл маршрутов:

 export const ContentRoutes: Routes = [
      { path: '', component: MainComponent, children:
        [
          { path: '', component: ContentComponent },
          { path: 'another', component: AnotherComponent },
          { path: 'another2', component: Another2Component },
        ]
      }
    ];