当父级请求时，Angular 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
    },
];

当我要求

时

/ family / fam_1 /个人资料

或

/ family / fam_1 / member / mbr_1 / profile

两条路线都显示MemberProfileComponent，而我无法显示FamilyProfileComponent。

Answer 1

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

这是一个有效的示例，两个配置文件都可以工作。

家庭资料：https://angular-hbaucv.stackblitz.io/family/fam_1/profile

会员资料：https://angular-hbaucv.stackblitz.io/family/fam_1/member/mbr_1/profile

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 2

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

喜欢这个：

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>模板（html）中添加FamilyProfileComponent。 像这样：

FamilyProfileComponent.html

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

这是Stackblitz

Answer 3

原来我的FamilyModule在不应该导入我的MemberModule的时候。