typescript 无法将任何路由与子路由和新的 angular 2 RC1 路由匹配
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37579125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot match any routes with child routes and new angular 2 RC1 router
提问by Pascal
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
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>
When I click on the "Create" routerLink I get this error:
当我单击“创建”routerLink 时，出现此错误：
Error
错误
EXCEPTION: Error: Uncaught (in promise): Cannot match any routes. Current segment: 'create'. Available routes: ['/'].
Why is the child route not loaded? Why is the /create route not in the available array of routes?
为什么没有加载子路由？为什么 /create 路由不在可用的路由数组中？
采纳答案by Günter Z?chbauer
Update
更新
This is not relevant anymore in the new V3-beta.2 router.
这在新的 V3-beta.2 路由器中不再相关。
Original
原来的
Change
改变
@Routes([
{path: '', component: SchoolyearsHomeComponent},
{path: '/create', component: CreateSchoolyearComponent}
])
to
到
@Routes([
{path: '/create', component: CreateSchoolyearComponent},
{path: '', component: SchoolyearsHomeComponent},
])
The order of routes is currently significant. The most specific routes should come first, the least specific routes last. This is a known issue and should be fixed soon.
路线的顺序目前很重要。最具体的路线应该在前，最不具体的路线最后。这是一个已知问题，应尽快修复。
回答by Gallaecio
You must remove the leading '/', the new router handles it for you.
您必须删除前导的“/”，新路由器会为您处理。
@Routes([
{path: 'create', component: CreateSchoolyearComponent},
{path: '', component: SchoolyearsHomeComponent},
])
回答by Ravali
Looks like the order of routes we mention in @Routes is notable. The most specific routes should come first, the least specific routes last.Depending on it change your @Routes to this
看起来我们在@Routes 中提到的路由顺序是值得注意的。最具体的路线应该放在最前面，最不具体的路线最后。根据它改变你的@Routes
@Routes([
{path: '/create', component: CreateSchoolyearComponent},
{path: ' ', component: SchoolyearsHomeComponent},
])`
回答by DeborahK
You need to inject the router into the app component, something like this:
您需要将路由器注入应用程序组件，如下所示：
export class AppComponent {
constructor(private router: Router) {}
}
This is normally needed when the template associated with this component does not use the <router-link>directive. A recent change to Angular does not load the router component when only using the <router-outlet>
当与该组件关联的模板不使用该<router-link>指令时，通常需要这样做。最近对 Angular 的更改在仅使用<router-outlet>
