我有两个简单的页面,我正在导航到在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/