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