Lỗi: Không thể khớp với bất kỳ tuyến đường nào. Phân đoạn URL:

Question

Tôi đang cố gắng làm theo hướng dẫn này http://onehungrymind.com/named-router-outlets-in-angular-2/ nhưng tôi gặp lỗi.

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'clients' Error: Cannot match any routes. URL Segment: 'clients'

Đây là tôi Router module

import {NgModule} from "@angular/core"; 
import {Routes, RouterModule} from "@angular/router"; 
import {AppComponent} from "./app.component"; 
import {ClientComponent} from "./clients/client.component"; 
import {ClientDetailsComponent} from "./clients/client-details/client-details.component"; 
import {ClientListComponent} from "./clients/client-list/client-list.component"; 

const routes: Routes = [ 
    {path: '', component: AppComponent}, 
    {path: 'clients', component: ClientComponent, children: [ 
     {path: 'list', component: ClientListComponent, outlet: 'client-list'}, 
     {path: ':id', component: ClientDetailsComponent, outlet: 'client-details'} 
    ] 
    }, 
]; 

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

App.component

export class AppComponent { 
    clientsLoaded = false; 

    constructor(private clientService: ClientService, 
       private router: Router) { 
    } 

    loadClientsComponent() { 
     this.router.navigate(['/clients', {outlets: {'client-list': ['clients'], 'client-details': ['none'], 'client-accounts-info': ['none']}}]); 
     this.clientsLoaded = true; 
    } 


} 

Client.component

import {Component} from "@angular/core"; 
import {ClientService} from "../services/client.service"; 
import {Router} from "@angular/router"; 
import {Client} from "./client-details/model/client.model"; 
@Component({ 
    selector: 'clients', 
    templateUrl: 'app/clients/client.component.html' 
}) 
export class ClientComponent { 
    clients: Array<Client> = []; 

    constructor(private clientService: ClientService, 
       private router: Router) { 
    } 
    ngOnInit() { 
     this.getClients().subscribe((clients) => { 
      this.clients = clients; 
     }); 
    } 

    getClients() { 
     return this.clientService.getClients(); 
    } 
} 

gì có thể là sai lầm? một cái gì đó tôi sẽ biết ơn sự giúp đỡ nào

CẬP NHẬT

Cám ơn những lời khuyên, tôi đã cố gắng như thế

const routes: Routes = [ 
    {path: '', component: AppComponent, pathMatch: 'full'}, 
    {path: 'clients', component: ClientComponent, children: [ 
     {path: '', component: ClientComponent}, 
     {path: 'list', component: ClientListComponent, outlet: 'client-list'}, 
     {path: ':id', component: ClientDetailsComponent, outlet: 'client-details'} 
    ] 
    }, 
]; 

Nhưng nó vẫn không hoạt động.

Có lẽ tôi đang làm sai này nhưng tôi có các mẫu sau cho tôi ClientComponent

<div id="sidebar" class="col-sm-3 client-sidebar"> 
    <h2 class="sidebar__header"> 
     Client list 
    </h2> 
    <div class="sidebar__list"> 
     <router-outlet name="client-list"></router-outlet> 
    </div> 
</div> 
<div id="client-info" class="col-sm-4 client-info"> 
    <div class="client-info__section client-info__section--general"> 
     <router-outlet name="client-details"></router-outlet> 
    </div> 
</div> 

Vì vậy, tôi muốn thành phần khách hàng của tôi để giữ tất cả các thành phần khách hàng có liên quan. Và nếu người dùng nhấp vào ví dụ một nút thì danh sách khách hàng sẽ được tải.

Answer 1

Thêm pathMatch: 'full'

{path: '', component: AppComponent, pathMatch: 'full'}, 

đến các tuyến đường với con đường trống '' và không có tuyến trẻ.

Answer 2

Tôi đang tích hợp Angular 2/4 vào ứng dụng MVC hiện có và tôi cũng gặp sự cố này.

Sử dụng ví dụ của bạn, nếu tôi có path: 'Clients' trong cấu hình định tuyến thay vì path: 'clients' và cố truy cập URL như http://localhost/clients, tôi sẽ gặp phải lỗi này.

Tên đường dẫn có phân biệt chữ hoa chữ thường (ngay bây giờ). Chúng sẽ không khớp với những gì trong URL của bạn nếu không, và với việc đặt tên/hành động MVC điển hình, chúng là "kiểu dáng InitialCaps".