错误：未捕获（在承诺中）：错误：无法匹配任何路由。网址细分：'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 {}

文件project-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，这将带您进入

-fPIC

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

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