web-dev-qa-db-ja.com

子ルートおよび新しいangular 2RC1ルーターとのルートを一致させることはできません

ApplicationComponent

import { Component } from '@angular/core';
import {Router, ROUTER_DIRECTIVES, Routes, ROUTER_PROVIDERS} from '@angular/router';
import {SchoolyearsComponent} from "./schoolyear/schoolyears.component";

@Component({
  directives: [ROUTER_DIRECTIVES],
  providers: [
    ROUTER_PROVIDERS
  ],
  templateUrl: './app/application.component.html',
  styleUrls: ['./app/application.component.css']
})
@Routes([
  {
    path: '/',
    component: SchoolyearsComponent,
  },
])
export class ApplicationComponent {}

SchoolyearsComponent

import { Component } from '@angular/core';
import { Routes, ROUTER_DIRECTIVES } from '@angular/router';
import { SchoolyearsHomeComponent } from './schoolyears.home.component';
import { CreateSchoolyearComponent } from './create.schoolyear.component';

@Routes([
    {
        path: '',
        component: SchoolyearsHomeComponent,
    },
    {
        path: '/create',
        component: CreateSchoolyearComponent
    }
])
@Component({ template: `<router-outlet></router-outlet>`, directives: [ROUTER_DIRECTIVES]})
export class SchoolyearsComponent {
}

schoolyears.component.html

<h3>Schoolyears</h3>

<div>
<a [routerLink]="['/create']">Create</a>
</div>

<table>
    <tr *ngFor="let s of schoolyears" (click)="createSchoolyear()">
        <td>{{s.id}}</td>
        <td>{{s.name}}</td>
        <td>{{s.startDate}}</td>
        <td>{{s.endDate}}</td>
    </tr>
</table>

「Create」routerLinkをクリックすると、次のエラーが発生します。

エラー

EXCEPTION: Error: Uncaught (in promise): Cannot match any routes. Current segment: 'create'. Available routes: ['/'].

子ルートがロードされないのはなぜですか？/createルートが利用可能なルートの配列にないのはなぜですか？

typescriptangularangular2-routingangular2-router
7
Pascal

更新

これは、新しいV3-beta.2ルーターには関係ありません。

オリジナル

変化する

@Routes([
  {path: '', component: SchoolyearsHomeComponent},
  {path: '/create', component: CreateSchoolyearComponent}
])

に

@Routes([
  {path: '/create', component: CreateSchoolyearComponent},
  {path: '', component: SchoolyearsHomeComponent},
])

ルートの順序は現在重要です。最も具体的なルートが最初に来て、最も具体的でないルートが最後に来る必要があります。これは既知の問題であり、すぐに修正する必要があります。

7
Günter Zöchbauer

先頭の「/」を削除する必要があります。新しいルーターがそれを処理します。

@Routes([
  {path: 'create', component: CreateSchoolyearComponent},
  {path: '', component: SchoolyearsHomeComponent},
])
3
Gallaecio

@Routesで言及したルートの順序は注目に値するようです。最も具体的なルートが最初に来て、最も具体的でないルートが最後に来る必要があります。それに応じて、@ Routesをこれに変更します。

@Routes([
  {path: '/create', component: CreateSchoolyearComponent},
  {path: ' ', component: SchoolyearsHomeComponent},
])`
0
Ravali

次のように、ルーターをアプリコンポーネントに挿入する必要があります。

 export class AppComponent {

  constructor(private router: Router) {}

}

これは通常、このコンポーネントに関連付けられているテンプレートが<router-link>ディレクティブを使用しない場合に必要です。 Angularへの最近の変更は、<router-outlet>のみを使用する場合、ルーターコンポーネントをロードしません

0
DeborahK