Question

我有两个简单的页面，我在angular2中使用路由导航。但看起来我得到以下异常：

EXCEPTION：在实例化路由器期间出错！（RouterLink - ＆gt;路由器）。

原始例外：路由配置应该只包含一个“组件”，“加载器”或“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

Angular2 - EXCEPTION：Route config应该只包含一个“组件”

1 个答案: