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ルートが利用可能なルートの配列にないのはなぜですか?
更新
これは、新しいV3-beta.2ルーターには関係ありません。
オリジナル
変化する
@Routes([
{path: '', component: SchoolyearsHomeComponent},
{path: '/create', component: CreateSchoolyearComponent}
])
に
@Routes([
{path: '/create', component: CreateSchoolyearComponent},
{path: '', component: SchoolyearsHomeComponent},
])
ルートの順序は現在重要です。最も具体的なルートが最初に来て、最も具体的でないルートが最後に来る必要があります。これは既知の問題であり、すぐに修正する必要があります。
先頭の「/」を削除する必要があります。新しいルーターがそれを処理します。
@Routes([
{path: 'create', component: CreateSchoolyearComponent},
{path: '', component: SchoolyearsHomeComponent},
])
@Routesで言及したルートの順序は注目に値するようです。最も具体的なルートが最初に来て、最も具体的でないルートが最後に来る必要があります。それに応じて、@ Routesをこれに変更します。
@Routes([
{path: '/create', component: CreateSchoolyearComponent},
{path: ' ', component: SchoolyearsHomeComponent},
])`
次のように、ルーターをアプリコンポーネントに挿入する必要があります。
export class AppComponent {
constructor(private router: Router) {}
}
これは通常、このコンポーネントに関連付けられているテンプレートが<router-link>
ディレクティブを使用しない場合に必要です。 Angularへの最近の変更は、<router-outlet>
のみを使用する場合、ルーターコンポーネントをロードしません