我有两个简单的页面,我正在导航到在angular2中使用路由。但似乎我收到以下异常:


  例外:路由器实例化期间出错! (RouterLink->路由器)。
  
  原来的例外:路由配置应仅包含一个“ component”,“ 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{}


应用程序

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上重现了该问题

有什么想法吗?

最佳答案

这个很困难也很有趣。。。

你的问题是你的进口,看看他们

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

关于javascript - Angular2-异常(exception):路由配置应仅包含一个“组件”,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36163759/

10-12 12:23
查看更多