Не удается сопоставить какие-либо маршруты с дочерними маршрутами и новым маршрутизатором angular 2 RC1.

Компонент приложения

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 {}

Компонент школьных лет

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>

Когда я нажимаю «Создать» routerLink, я получаю эту ошибку:

Ошибка

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

Почему дочерний маршрут не загружается? Почему маршрут /create отсутствует в доступном массиве маршрутов?


typescript angular angular2-routing angular2-router
person Pascal    schedule 01.06.2016    source источник

Ответы (4)


arrow_upward
7
arrow_downward

Обновить

В новом маршрутизаторе V3-beta.2 это уже не актуально.

Исходный

Изменять

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

to

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

Порядок маршрутов в настоящее время имеет большое значение. Наиболее специфичные маршруты должны идти первыми, наименее специфичные маршруты — последними. Это известная проблема, и она должна быть исправлена ​​в ближайшее время.

person Günter Zöchbauer    schedule 02.06.2016
comment
Это не помогло. Я получаю то же сообщение об ошибке. Текущий созданный сегмент отсутствует в доступных маршрутах. Вы, казалось, знали мою цель, но чтобы убедиться: я хочу заменить schoolyears.component.html на create.schoolyear.component.html, перейдя по ссылке «создать». - person Pascal; 02.06.2016
comment
Кажется, он отлично работает в plnkr.co/edit/oksKwNmGvubDlpV45yEB?p=preview. Можете ли вы попытаться воспроизвести вашу проблему с помощью этого Plunker? - person Günter Zöchbauer; 02.06.2016
comment
Надеюсь, я добавил routerLink (который вы забыли в своем образце) в нужное место: plnkr.co /edit/vjCbsqZazr0rp77xjnSm?p=preview НИЧЕГО не происходит в момент нажатия кнопки? Можем ли мы продолжить, пожалуйста, по моей ссылке? - person Pascal; 02.06.2016
comment
Кажется, у маршрутизатора проблемы с маршрутами, у которых путь ''. Таким образом, это работает plnkr.co/edit/c8BeO2VsjScuF4rkCbUi?p=preview. - person Günter Zöchbauer; 02.06.2016
comment
Спасибо, я все равно хотел иметь значение пути, например, «школьные годы», поэтому меня не волнует эта ошибка ;-), но у меня есть еще один вопрос, почему дочерний компонент «создает» не показывает полный путь до родителя в URL? =› /школьные годы/создать ? Это работало правильно до миграции rc1 с маршрутом ... по родительскому пути школьных лет. - person Pascal; 03.06.2016
comment
Не уверен, что вы имеете в виду. не показать где? В Планкере? Возможно, вы захотите открыть предварительный просмотр в отдельном окне (синяя кнопка изменения размера в правом верхнем углу области вывода), чтобы увидеть полный путь. В противном случае он работает в iframe, и в главном окне не отображаются обновления URL. - person Günter Zöchbauer; 03.06.2016
comment
Чтобы было понятнее :-) =› stackoverflow.com/questions/37620359/ - person Pascal; 03.06.2016

arrow_upward
3
arrow_downward

Вы должны удалить начальный «/», новый маршрутизатор сделает это за вас.

@Routes([
  {path: 'create', component: CreateSchoolyearComponent},
  {path: '', component: SchoolyearsHomeComponent},
])
person Gallaecio    schedule 24.06.2016
comment
Я проверил это, и это кажется правильным! - person Daniel Ram; 13.07.2016

arrow_upward
0
arrow_downward

Вам нужно внедрить роутер в компонент приложения, примерно так:

 export class AppComponent {

  constructor(private router: Router) {}

}

Обычно это необходимо, когда шаблон, связанный с этим компонентом, не использует директиву <router-link>. Недавнее изменение в Angular не загружает компонент маршрутизатора только при использовании <router-outlet>

person DeborahK    schedule 01.06.2016
comment
Это не помогло. Я получаю то же сообщение об ошибке. Текущий созданный сегмент отсутствует в доступных маршрутах. - person Pascal; 02.06.2016

arrow_upward
0
arrow_downward

Похоже, порядок маршрутов, которые мы упоминаем в @Routes, примечателен. Наиболее конкретные маршруты должны быть первыми, наименее конкретные маршруты последними. В зависимости от этого измените свои @Routes на это

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