无法匹配任何具有子路由和新 angular 2 RC1 路由器的路由

Question

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 路由不在可用路由数组中？

Answer 1

你需要将路由器注入应用组件，像这样：

 export class AppComponent {

  constructor(private router: Router) {}

}

当与此组件关联的模板不使用 <router-link> 指令时，通常需要这样做。最近对 Angular 的更改在仅使用 <router-outlet>

时不会加载路由器组件

Answer 2

更新

这在新的 V3-beta.2 路由器中不再相关。

原创

改变

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

至

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

路线的顺序目前很重要。最具体的路线应该放在第一位，最不具体的路线最后。这是一个已知问题，应尽快修复。

Answer 3

您必须删除前导的“/”，新路由器会为您处理。

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

Answer 4

看起来我们在@Routes 中提到的路线顺序很值得注意。最具体的路线应该放在第一位，最不具体的路线 last.Depending 将你的@Routes 更改为这个

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

无法匹配任何具有子路由和新 angular 2 RC1 路由器的路由

Cannot match any routes with child routes and new angular 2 RC1 router

typescript

angular

angular2-routing

angular2-router