Question

我有一个名为User的角度应用程序路由，然后我有一个名为UserDetails的子路由，当我点击编辑我想导航到一个新路由（userdetails），我得到一个错误无法匹配任何路线。网址细分：＆＃39; user / 1＆＃39;。以下是我的路由配置

例外结果 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',
      }
    ]
  }
];

用户-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中，试试＆＃34;：id＆＃34;而不是＆＃34; user /：id＆＃34;

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

子路由上的Angular 5路由问题

2 个答案: