Angular2 - ИСКЛЮЧЕНИЕ: Конфигурация маршрута должна содержать ровно один «компонент»

0

У меня есть две простые страницы, которые я просматриваю при использовании маршрутизации в угловом2. Но похоже, что я получаю следующее исключение:

ИСКЛЮЧЕНИЕ: Ошибка при создании Router! (RouterLink → Маршрутизатор).

ОРИГИНАЛЬНОЕ ИСКЛЮЧЕНИЕ: Конфигурация маршрута должна содержать только одно свойство "компонент", "загрузчик" или "redirectTo".

Вот файлы

page1.ts

import {Component} from 'angular2/core';

@Component({
    selector: "page1",
    template: 'page 1 goes here.'
})
export class Page1Cmp{} 

page2.ts

import {Component} from 'angular2/core';

@Component({
    selector: "page2",
    template: 'page 2 goes here.'
})
export class Page2Cmp{}

app.ts

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_DIRECTIVES, RouteConfig, ROUTER_PROVIDERS} from 'angular2/router';
import {Page1Cmp} from './page1';
import {Page2Cmp} from './page2';

@Component({
    selector: "app",
    template: '<a [routerLink]="['Page1']">Page1</a> | <a [routerLink]="['Page2']">Page2</a>
    <router-outlet></router-outlet>
    ',
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    {path: "/page1", name: "Page1", component: Page1Cmp, useAsDefault: true},
    {path: "/page2", name: "Page2", component: Page2Cmp}
])
class MyApp{}

bootstrap(MyApp, [
    ROUTER_PROVIDERS
]);

Я перепробовал проблему на plunkr здесь

Есть предположения?

Теги:
angular

1 ответ

1
Лучший ответ

Это было довольно сложно и весело...

Ваша проблема - ваш импорт, посмотрите на них

import {Page1Cmp} from './page1';
import {Page2Cmp} from './page2';

Вы видите что-то не так? Нет, ничего, не так ли?

Теперь взгляните на эти файлы

page1.ts

export class Page2Cmp{}

page2.ts

export class Page1Cmp{}

Вы видите это сейчас? Да! Имена классов не соответствуют файлу, где они: P, поэтому вы импортируете классы, которые не существуют из каждого файла.

Таким образом, вы можете перемещать Page1Cmp в page1.ts и Page2Cmp в page2.ts.

Здесь ваш plnkr работает.

На самом деле мне потребовалось несколько минут, чтобы увидеть это, это было очень хорошо скрыто: P

  • 2
    LOL Я чувствую себя так глупо: P большое спасибо.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню