angular - 错误:未捕获(承诺):错误:无法匹配任何路由。URL 段:'edit/2'
问题描述
我有一个使用 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'
}
]
},
}
我调用了一个显示侧导航栏的文件:
一切顺利,得到了我想要的项目列表,但是当我点击编辑时,我收到上面的错误错误:无法匹配任何路线......
请帮忙 :)
解决方案
您试图导航到绝对 URL,这将带您到
localhost/#/edit/2 // which not found
您必须使用相对导航到当前路线
constructor(private router: Router, private route: ActivatedRoute) {}
this.router.navigate(['edit',id], { relativeTo: this.route });
推荐阅读
- node.js - 节点脚本或 npm 模块检查文件是否更改
- python - 用于启动远程 Python 脚本的 Windows 命令
- ios - 调用 Api 时内存泄漏
- python - 如何将 python 变量传递给对 sed 的子进程调用?
- html - css 网格使用 fr 增长超过 100% 的宽度,但没有使用 minmax
- c# - 从分块请求中获取响应
- node.js - 执行 npm install 命令时出现“npm ERR!file bashcls”
- python - 如何在literal_eval之前用Python AST中的dict替换OrderedDict?
- python - Python One-hot 对文本中的每 2 个字符进行一次编码
- accurev - 将 AccuRev 事务中的所有文件与父流版本进行比较