角6在父请求时加载子路由组件

Question

我有我的应用程序的两个部分，一个家庭概况和一个成员配置文件。我的路线设置如下：(简化)

app.routes.ts：

export const appRoutes: Routes = [
    {
      path: 'family/:familyId',
      loadChildren: './core/containers/family/family.module#FamilyModule'
    }
];

family.routes.ts：

export const familyRoutes: Routes = [
    {
        path: 'profile',
        component: FamilyProfileComponent
    },
    {
        path: 'member/:memberId',
        loadChildren: '../member/member.module#MemberModule'
    },
];

member.routes.ts

export const memberRoutes: Routes = [
    {
        path: 'profile',
        component: MemberProfileComponent
    },
];

当我请求

/家庭/fam_1/概况

或

/家庭/fam_1/成员/mbr_1/概况

这两条路由都显示MemberProfileComponent，而我无法让FamilyProfileComponent显示。

Answer 1

原来我的FamilyModule正在导入我的MemberModule，而它本来就不该导入。

Answer 2

https://stackblitz.com/edit/angular-hbaucv

这是一个有用的例子，这两个概要文件都可以工作。

家庭简介：1/概况

会员简介：1/概况

app-routing.module.ts

export const appRoutes: Routes = [
  { path: 'family/:familyId', loadChildren: './family/family.module#FamilyModule' }
]

family-routing.module.ts

export const familyRoutes: Routes = [
  { path: 'profile', component: FamilyProfileComponent },
  { path: 'member/:memberId', loadChildren: './member/member.module#MemberModule' }
]

member-routing.module.ts

export const memberRoutes: Routes = [
  { path: 'profile', component: MemberProfileComponent },
]

Answer 3

首先，请更改为您的家庭模块文件。

就像这样：

const familyRoutes: Routes = [
  { path: '', redirectTo: 'profile' },
  {
    path: 'profile',
    component: FamilyprofileComponent,
    children: [     
      {
        path: 'member/:memberId',
        loadChildren: './familyprofile/member/member.module#MemberModule'
      }
    ]
  },
];

而不是

const familyRoutes: Routes = [
    {
        path: 'profile',
        component: FamilyProfileComponent
    },
    {
        path: 'member/:memberId',
        loadChildren: '../member/member.module#MemberModule'
    },
];

而不是将<router-outlet>添加到FamilyProfileComponent模板(Html)中。就像这样：

FamilyProfileComponent.html

// Your parent html code
<router-outlet></router-outlet> // Child html content will display here.

这是斯塔克布利茨