Angular4-带参数的嵌套路线

本文介绍了Angular4-带参数的嵌套路线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在Angular4中为我的用户个人资料设置了路由

I got a routing for my user profiles in 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}
    ]
},

问题是，当我导航到用户/设置时，他尝试打开用户/:id ...任何想法如何解决此问题?

The problem is that when i navigate to user/settings he try to open user/:id ... any idea how i can fix this problem?

推荐答案

尝试更改这样的路线顺序

Try to change the order of your routes like this

{
  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-带参数的嵌套路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！