ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'list' Error: Cannot match any routes. URL Segment: 'list'
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'list' Error: Cannot match any routes. URL Segment: 'list'
我有一个使用 angular5 的简单应用程序,但出现以下错误:
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'list'
Error: Cannot match any routes. URL Segment: 'list'
我正在尝试编辑客户的信息,所以在我毫无问题地获得客户列表之前,我单击编辑,我正确地获得了他的所有信息但是当我保存时我应该看到列表客户,而不是我得到上述错误。
这是这个组件的结构:
文件:客户端--routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {ClientsComponent} from './clients/clients.component';
import {EditClientsComponent} from './clients/edit-clients/edit-clients.component';
import {NewClientsComponent} from './new-clients/new-clients.component';
const routes: Routes = [
{
path: '',
pathMatch: 'full',
data: {
title: 'Clients'
}
},
{
path: 'list',
pathMatch: 'full',
component: ClientsComponent,
data: {
title: 'Liste des clients'
}
},
{
path: 'list/edit/:id',
pathMatch: 'full',
component : EditClientsComponent,
data : {
title: 'editer un client'
}
},
{
path: 'ajouter',
pathMatch: 'full',
component : NewClientsComponent,
data: {
title: 'Ajouter un client'
}
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ClientRoutingModule {}
文件EditClientComponent.ts
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Clients} from '../../../Models/Clients';
import {ClientService} from '../../../../../../service/client.service';
@Component({
selector: 'app-edit-clients',
templateUrl: './edit-clients.component.html',
styleUrls: ['./edit-clients.component.scss']
})
export class EditClientsComponent implements OnInit {
idClient:number;
client:Clients = new Clients();
constructor(public activatedRoute:ActivatedRoute ,
public clientService:ClientService,
public router:Router) {
this.idClient = activatedRoute.snapshot.params['id'];
}
ngOnInit() {
this.clientService.getClient(this.idClient)
.subscribe((data:Clients)=>{
this.client=data;
},err=>{
console.log(err);
})
}
EditClient(){
this.clientService.updateClient(this.client)
.subscribe(data=>{
console.log(data);
this.router.navigateByUrl('list');
},err=>{
console.log(err);
alert("Probleme");
})
}
}
最后 app.routinge.ts
export const routes: Routes = [
{
path: '',
redirectTo: 'pages',
pathMatch: 'full',
},
{
path: '',
component: FullLayoutComponent,
data: {
title: 'Home'
},
children: [
{
path: 'GestionClients',
loadChildren: './views/Admin/GestionClients/client.module#ClientModule'
}
]
}
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
使用相对导航而不是从 list/edit/:id 到列表,使用 ../ 到你路径中的上一级
constructor( private route: ActivatedRoute,private router: Router) { }
this.router.navigate([ '../../../list' ], { relativeTo: this.route });
在我的例子中,我在 app.module.ts
中错放了 AppRoutingModule
的名称,Visual Studio 代码没有显示任何错误,我也没有得到任何编译错误:
import { AppRoutingModule } from './app-routing.module';
确保名称正确,在我的例子中是这样的:
import { AppRoutingModule } from './app.routing.module';
希望这会有所帮助。
我有一个使用 angular5 的简单应用程序,但出现以下错误:
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'list'
Error: Cannot match any routes. URL Segment: 'list'
我正在尝试编辑客户的信息,所以在我毫无问题地获得客户列表之前,我单击编辑,我正确地获得了他的所有信息但是当我保存时我应该看到列表客户,而不是我得到上述错误。
这是这个组件的结构:
文件:客户端--routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {ClientsComponent} from './clients/clients.component';
import {EditClientsComponent} from './clients/edit-clients/edit-clients.component';
import {NewClientsComponent} from './new-clients/new-clients.component';
const routes: Routes = [
{
path: '',
pathMatch: 'full',
data: {
title: 'Clients'
}
},
{
path: 'list',
pathMatch: 'full',
component: ClientsComponent,
data: {
title: 'Liste des clients'
}
},
{
path: 'list/edit/:id',
pathMatch: 'full',
component : EditClientsComponent,
data : {
title: 'editer un client'
}
},
{
path: 'ajouter',
pathMatch: 'full',
component : NewClientsComponent,
data: {
title: 'Ajouter un client'
}
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ClientRoutingModule {}
文件EditClientComponent.ts
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Clients} from '../../../Models/Clients';
import {ClientService} from '../../../../../../service/client.service';
@Component({
selector: 'app-edit-clients',
templateUrl: './edit-clients.component.html',
styleUrls: ['./edit-clients.component.scss']
})
export class EditClientsComponent implements OnInit {
idClient:number;
client:Clients = new Clients();
constructor(public activatedRoute:ActivatedRoute ,
public clientService:ClientService,
public router:Router) {
this.idClient = activatedRoute.snapshot.params['id'];
}
ngOnInit() {
this.clientService.getClient(this.idClient)
.subscribe((data:Clients)=>{
this.client=data;
},err=>{
console.log(err);
})
}
EditClient(){
this.clientService.updateClient(this.client)
.subscribe(data=>{
console.log(data);
this.router.navigateByUrl('list');
},err=>{
console.log(err);
alert("Probleme");
})
}
}
最后 app.routinge.ts
export const routes: Routes = [
{
path: '',
redirectTo: 'pages',
pathMatch: 'full',
},
{
path: '',
component: FullLayoutComponent,
data: {
title: 'Home'
},
children: [
{
path: 'GestionClients',
loadChildren: './views/Admin/GestionClients/client.module#ClientModule'
}
]
}
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
使用相对导航而不是从 list/edit/:id 到列表,使用 ../ 到你路径中的上一级
constructor( private route: ActivatedRoute,private router: Router) { }
this.router.navigate([ '../../../list' ], { relativeTo: this.route });
在我的例子中,我在 app.module.ts
中错放了 AppRoutingModule
的名称,Visual Studio 代码没有显示任何错误,我也没有得到任何编译错误:
import { AppRoutingModule } from './app-routing.module';
确保名称正确,在我的例子中是这样的:
import { AppRoutingModule } from './app.routing.module';
希望这会有所帮助。