Angular2 - EXCEPTION：路由配置應該只包含一個「組件」

Question

我有兩個簡單的頁面，我正在瀏覽使用angular2中的路由。但它看起來像我得到以下例外：

EXCEPTION：在實例化路由器時出錯！ （RouterLink - >路由器）。

原始異常：路由配置應該只包含一個「組件」，「loader」或「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 here

任何思考的問題？

Answer 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