首页 文章

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

提问于
浏览 次
0

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

EXCEPTION：在实例化路由器期间出错！ （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 here重新制作了这个问题

有什么想法吗？

javascript angularjs 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

    回复于

相关问题