Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'edit/2'

Question

我有一个使用 angular4 的简单应用程序，但出现以下错误：

 :1440 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'edit/2'
Error: Cannot match any routes. URL Segment: 'edit/2'
    at ApplyRedirects.noMatchError (router.js:1719)
    at CatchSubscriber.eval [as selector] (router.js:1684)
    at CatchSubscriber.error (catchError.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:131)

这是项目的结构：

--src
    --app
        --views
            --admin
                --GestionProjects
                     --projects
                           --edit-projects
                                 --edit-project.component.ts
                                 --edit-project.component.html
                           --projects.component.ts
                           --projects.component.html
                     --new-project
                           --new-project.component.ts
                           --new-project.component.html
                     --project.module.ts
                     --project-routing.module.ts

这是文件app.routing.ts

 import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';

// Import Containers
import {
  FullLayoutComponent,
  SimpleLayoutComponent
} from './containers';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'pages',
    pathMatch: 'full',
  },
  {
    path: '',
    component: FullLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [

      {
        path: 'GestionProject',
        loadChildren: './views/Admin/GestionProjects/projet.module#ProjetModule'
      } 

    ]
  },
  {
    path: 'pages',
    component: SimpleLayoutComponent,
    data: {
      title: 'Pages'
    },
    children: [
      {
        path: '',
        loadChildren: './views/pages/pages.module#PagesModule',
      }
    ]
  }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

文件项目-routing.module.ts :

    import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {ProjectsComponent} from './projects/projects.component';
import {NewProjectsComponent} from './new-projects/new-projects.component';
import {EditProjectComponent} from './projects/edit-project/edit-project.component';


const routes: Routes = [
  {
    path: '',
    data: {
      title: 'Projects'
    },
    children: [
      {
        path: 'list',
        component: ProjectsComponent,
        data: {
          title: 'List of projects'
        },
        children: [
          {
            path: 'edit/:id',
            component : EditProjectComponent,
            data : {
              title: 'editer a project'
            }
          }
        ]
      },
      {
        path: 'add',
        component : NewProjectsComponent,
        data: {
          title: 'add a new project'
        }
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class ProjetRoutingModule {}

文件project.component.ts

    import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';
import {ProjetService} from '../../../../../service/projet.service';
import {Projet} from '../../Models/Projet';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.scss']
})
export class ProjectsComponent implements OnInit {

  pageProjects:any;
  pages:Array<number>;

  constructor(private router:Router,
              private projetSevice:ProjetService ) { }

  ngOnInit() {

        this.projetSevice.getProjects()
          .subscribe(data=>{
            this.pageProjects=data;
          },err=>{
            console.log('this is error');
          })
  }

  Edit(id:number){
    this.router.navigate(['edit',id]);
  }

  delete(p:Projet){
      let confirm = window.confirm('are you sur .. ');
      if(confirm==true){
        this.projetSevice.deleteProject(p.id)
          .subscribe(data=>{
            this.pageProjects.splice(
              this.pageProjects.indexOf(p),1
            );
          },err=>{
            console.log(err);
          })
      }
  }

}

最后是文件 project.component.html

<table class="table table-striped">
        <thead>
        <tr>
          <th>Numéro</th>
          <th>Intitulé</th>
          <th>Description</th>
          <th></th>
        </tr>
        </thead>
        <tbody>

        <tr *ngFor="let c of pageProjects">
          <td>{{c.id}}</td>
          <td>{{c.intitule}}</td>
          <td>{{c.description}}</td>
          <td><a (click)="delete(c)">delete</a> <a (click)="Edit(c.id)">Edit</a></td>
        </tr>

        </tbody>
      </table>

我有另一个名为 _nav.ts 的文件：

 export const navigation = [
  {
    name: 'Tableau de bord',
    url: '/dashboard',
    icon: 'icon-speedometer',
  },
{
    name: 'Projets',
    url: '/GestionProjects',
    icon: 'icon-puzzle',
    children: [
      {
        name: 'List of projects',
        url: '/list',
        icon: 'icon-puzzle'
      },
      {
        name: 'add a new project',
        url: '/add',
        icon: 'icon-puzzle'
      }

    ]
  },
}

我调用了一个显示侧边导航栏的文件：

一切顺利，得到了我想要的项目列表，但是当我单击“编辑”时，出现错误以上错误：无法匹配任何路线...

请帮助:)

Answer 1

您正在尝试导航到绝对 URL，这将带您到

  localhost/#/edit/2 // which not found

你必须使用当前路线的相对导航

constructor(private router: Router, private route: ActivatedRoute) {}

this.router.navigate(['edit',id], { relativeTo: this.route });

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'edit/2'

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'edit/2'

angular

routes

angular5

angular-route-segment