Компонент не загружен в роутер-розетку - PullRequest
Новая
       23

Компонент не загружен в роутер-розетку

0 голосов
/ 29 апреля 2019

Когда 

<router-outlet (activate)="onActivate($event)"></router-outlet>

и 

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

находятся в одном и том же шаблоне app.component.html , нажатие кнопки «Сведения о здании» загрузит BuildingDetailsComponent в маршрутизаторе-выходе buildingDetails .

Но при комментировании маршрутизатора-розетки buildingDetails в app.component.html и оставьте комментарий в маршрутизаторе-розетке buildingDetails в sidenavigation.component.html , компонент BuildingDetailsComponent не будет загружен в маршрутизатор-розетку buildingDetails при нажатии кнопки Подробности здания.

app.component.html: 

<router-outlet (activate)="onActivate($event)"></router-outlet>
<router-outlet name="buildingDetails"></router-outlet>

sidenavigation.component.html: 

<p>
  sidenavigation works!
</p>
<button (click)="openBuildingDetails()">
  Building Details
</button>
<hr>
<!--<router-outlet name="buildingDetails"></router-outlet>--> when moving the router outlet here, loading BuildingDetails Component on openBuildingDetails() button click is not working anymore

sidenavigation.component.ts:

public openBuildingDetails() { this.router.navigate([{ outlets: { buildingDetails: "feature-component" } }]); }

app-routing-module: 

const appRoutes: Routes = [
{
    path: "",
    component: SidenavigationComponent,
    pathMatch: "full"
},
{
    path: "feature-component",
    loadChildren: "./modules/building/building.module#BuildingModule",
    outlet: "buildingDetails"
}];

@NgModule({
imports: [
    CommonModule,
    RouterModule.forRoot(
        appRoutes,
        {
            enableTracing: true
        }
    )
],
exports: [
    RouterModule
]})

building-routing-module: 

const routes: Routes = [
{
    path: "",
    component: BuildingDetailsComponent
}];

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

Кто-нибудь знает, почему и как это можно решить?

Я добавил пример кода для каждого случая.Единственная разница между обоими примерами заключается в расположении названной роутер-розетки.Первый работает (названный router-outlet находится в app.component.html).Второй не работает (указанный маршрутизатор-розетка находится в sidenavigation.html).

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

Проблема: при перемещении указанной розетки-маршрутизатора в другой шаблон, чем неназванная точка-розетка, компонент BuildingDetails больше не загружается при нажатии кнопки openBuildingDetails ().

Работает: https://stackblitz.com/github/stonedraider/router-outlets

Не работает: https://stackblitz.com/github/stonedraider/not-working-router-outlets

1 Ответ

0 голосов
/ 29 апреля 2019

Необходимо добавить боковой навигационный селектор в app.component.html, как показано ниже, и удалить родительский маршрутизатор-выход из-за конфликтов родительского маршрутизатора-выхода при загрузке компонента. 

<app-sidenavigation></app-sidenavigation>

и теперь компонент боковой навигации загружает компонент здания.

Либо обратитесь по ссылке ниже, чтобы загрузить детей с ленивой нагрузкой:

Link

...