Angular 2 版本:2.0.0-alpha.44
我一直在尝试在 Angular 2 中进行路由。虽然我能够完成正常的路由,但在引入子路由时我遇到了一些问题。这是 plnkr ( http://plnkr.co/edit/Y5doqU1WcEe4Ldr7KfPJ) 上的示例
下面是快速引用的代码。我正在尝试实现以下路由
App
/\
/ \
HomeCmp HelloCmp
\
\
ChildCmp
下面是我配置路径的方式
import {bootstrap, bind, Component, View} from 'angular2/angular2'
import {RouteConfig, RouteParams, ROUTER_DIRECTIVES, APP_BASE_HREF, ROUTER_BINDINGS} from 'angular2/router'
@Component({
selector: 'child-cmp'
})
@View({
template: `
<div>
<h3>Whats up</h3>
</div>
`
})
class ChildCmp { }
// ************************ Hello Component ***********************************
@Component({
selector: 'hello-cmp'
})
@View({
template: `
<div>
<h2>Hello there !</h2>
<router-outlet></router-outlet>
</div>
`,
directives: ROUTER_DIRECTIVES
})
@RouteConfig([
{path: '/', component: ChildCmp, as: 'ChildCmp'}
])
class HelloCmp { }
//************************** HOME Component ***********************************
@Component({
selector: 'home-cmp'
})
@View({
template: `
<div>
<h2>Welcome Home</h2>
</div>
`
})
class HomeCmp {}
//************************* APP Component *************************************
@Component({
selector: 'app-cmp'
})
@View({
template: `
<div>
<h1>Hello {{message}}!</h1>
<a [router-link]="['./HomeCmp']">home</a>
<a [router-link]="['./HelloCmp']">hello</a>
<hr>
<router-outlet></router-outlet>
</div>
`,
directives: ROUTER_DIRECTIVES
})
@RouteConfig([
{path: '/', component: HomeCmp, as: 'HomeCmp'}
{path: '/hello/...', component: HelloCmp, as: 'HelloCmp'}
])
export class App {
message:string = 'world';
}
bootstrap(App, [
ROUTER_BINDINGS,
bind(APP_BASE_HREF).toValue(location.pathname)
]);
当我删除子路由时,它工作正常。但是对于子路由,我得到以下错误。
EXCEPTION: Link "["HelloCmp"]" does not resolve to a terminal or async instruction. in [null]
我关注了提到的文章 here . 但无法使其正常工作。有人可以帮忙吗?谢谢
最佳答案
您只需要在 routerLink
中导入子组件,您的代码就可以正常工作。例如:
<a [routerLink]="['./HelloCmp','ChildCmp']">hello</a>
这是您的代码的工作 plnkur。 <知识库> Plunker Code
有关此路由的更多信息,请参阅 github 上的此问题 here
更新到 Angular 2 测试版
从 Angular 2 beta 开始,这里有一些变化:
router-link
已更改为 routerLink您也可以使用
useAsDefault : true
而不是像这样在 routerLink 时提供 child -{路径:'/blabla',组件:ABC,名称:ABC,useAsDefault:true}
关于angular - 如何在 Angular 2 中使用子路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33840219/