Angular4 - 带参数的嵌套路由

Question

我在 Angular4 中获得了我的用户配置文件的路由

/* Frame Default */
{
    path: '', component: FrameDefaultComponent,
    children: [
        {path: 'home', component: SiteHomeComponent},
        {path: 'home/:page', component: SiteHomeComponent},
        {
            path: 'user/:id', component: SiteUserProfileComponent,
            children: [
                {path: '', redirectTo: 'home', pathMatch: 'full'},
                {path: 'home', component: SiteUserProfileHomeComponent},
                {path: 'about', component: SiteUserProfileAboutComponent}
            ]
        },
        {
            path: 'user/settings', component: SiteUserSettingsComponent,
            children: [
                {path: '', redirectTo: 'home', pathMatch: 'full'},
                {path: 'home', component: SiteUserProfileHomeComponent},
                {path: 'about', component: SiteUserProfileAboutComponent}
            ]
        },
        {path: 'demo', component: SiteDemoComponent}
    ]
},

问题是，当我导航到 user/settings 时，他尝试打开 user/:id ...知道我该如何解决这个问题吗？

Answer 1

尝试像这样更改路线的顺序

{
  path: '', component: FrameDefaultComponent,
  children: [
  {path: 'home', component: SiteHomeComponent},
  {path: 'home/:page', component: SiteHomeComponent},
  {
    path: 'user/settings', component: SiteUserSettingsComponent,
    children: [
      {path: '', redirectTo: 'home', pathMatch: 'full'},
      {path: 'home', component: SiteUserProfileHomeComponent},
      {path: 'about', component: SiteUserProfileAboutComponent}
    ]
  },
  {
    path: 'user/:id', component: SiteUserProfileComponent,
    children: [
      {path: '', redirectTo: 'home', pathMatch: 'full'},
      {path: 'home', component: SiteUserProfileHomeComponent},
      {path: 'about', component: SiteUserProfileAboutComponent}
    ]
  },
  {path: 'demo', component: SiteDemoComponent}
]
},

Angular4 - 带参数的嵌套路由

Angular4 - Nested route with params

angular-routing

angular