子路由上的Angular 5路由问题

Question

我有一个名为 User 的路由应用程序，然后我有一个名为 UserDetails 的子路由，当我单击编辑时，我想导航到新路由（userdetails），我收到错误无法匹配任何路由。 URL 段：'user/1'。下面是我的路由配置

异常结果 http://localhost:4200/user - 网格页面 http://localhost:4200/user/1 - 编辑页面

app.routing.ts

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    path: '',
    component: FullLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'dashboard',
        loadChildren: './views/dashboard/dashboard.module#DashboardModule'
      },
      {
        path: 'user',
        loadChildren: './views/user/user.module#UserModule',
      } 
    ]
  },
  {
    path: 'login',
    component: SimpleLayoutComponent,
    data: {
      title: ''
    },
    children: [
      {
        path: '',
        loadChildren: './views/login/login.module#LoginModule',
      }
    ]
  }
];

user-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: UserComponent,
    data: {
      title: 'User'
    },
    children: [
      {
        path: 'user/:id',
        component: UserDetailsComponent,
        data: {
          title: 'User Details'
        }
      }
    ]
  }
];

Answer 1

您可以对您的 user-routing.module.ts 进行如下更改。

const routes: Routes = [
 {
   path: '',
   component: UserComponent,
   data: {
     title: 'User'
   },
   children: [{
     path: 'User',
     component: UserComponent,
     pathMatch: 'full',
   },{
     path: 'user/:id',
     component: UserDetailsComponent,
     data: {
      title: 'User Details'
    }
  }
  ]
 }

];

点击编辑时，调用函数示例

import {Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
constructor(private router: Router,
          private route: ActivatedRoute){
}
editUserData(){
  this.router.navigate([id],{relativeTo: this.route});
  return false;
}

Answer 2

在你的 user-routing.module.ts 中，尝试使用 ":id" 而不是 "user/:id"

const routes: Routes = [
  {
    path: '',
    component: UserComponent,
    data: {
      title: 'User'
    },
    children: [
      {
        path: ':id',
        component: UserDetailsComponent,
        data: {
          title: 'User Details'
        }
      }
    ]
  }
];