web-dev-qa-db-ja.com

エラー：どのルートにも一致しません。 URLセグメント：

私はこのチュートリアルをフォローしようとしています http://onehungrymind.com/named-router-outlets-in-angular-2/ ですが、エラーが発生しています。

例外：キャッチされません（約束）：エラー：どのルートにも一致しません。 URLセグメント：「クライアント」エラー：どのルートにも一致できません。 URLセグメント：「クライアント」

これが私の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();
    }
}

何が悪いのでしょうか？私はどんな助けにも感謝します

UPDATE

アドバイスをありがとう、私はそのようなことを試しました

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'}
    ]
    },
];

しかし、まだ機能しません。

たぶんこれは間違っていますが、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>

したがって、クライアントコンポーネントにすべてのクライアント関連コンポーネントを保持させたいと思います。また、ユーザーがたとえばボタンをクリックすると、クライアントリストがロードされます。

angularroutingangular-ui-router
21
Ptzhub

pathMatch: 'full'を追加

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

空のパス''を持ち、子ルートのないルートへ。

10
Günter Zöchbauer

Angular 2/4を既存のMVCアプリケーションに統合していますが、この問題もありました。

あなたの例を使用すると、ルーティング設定にpath: 'Clients'の代わりにpath: 'clients'があり、http://localhost/clientsなどのURLにアクセスしようとすると、このエラーが発生します。

ルートパス名は大文字と小文字を区別します（とにかく今のところ）。それ以外の場合、URLの内容と一致しません。また、一般的なMVCコントローラー/アクションの命名では、「InitialCapsスタイル」です。

2
bcr

app.module.tsでインポートセッションを確認し、ルーティングを見逃していないことを確認します。

imports: [
    BrowserModule,
    APP_ROUTES,
    AppRoutingModule
  ],
0
Jahuso