如何在 Angular 2 中使用子路由
[英] How to use child routes in Angular 2
本文介绍了如何在 Angular 2 中使用子路由的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
Angular 2 版本:2.0.0-alpha.44
我一直在尝试在 Angular 2 中进行路由.虽然我能够完成正常的路由,但在引入子路由时我遇到了一些问题.这是 plnkr 的示例 (http://plnkr.co/edit/Y5doqU1WcEe4Ldr7KfPJ)
以下是快速参考的代码.我正在尝试实现以下路由
应用程序/\/\HomeCmp HelloCmp\\儿童Cmp
下面是我如何配置我的路径
从 'angular2/angular2' 导入 {bootstrap, bind, Component, View}从angular2/router"导入 {RouteConfig, RouteParams, ROUTER_DIRECTIVES, APP_BASE_HREF, ROUTER_BINDINGS}@成分({选择器:'child-cmp'})@看法({模板:`<div><h3>怎么了</h3>
`})类 ChildCmp { }//************************ 你好组件 *************************************@成分({选择器:'你好-cmp'})@看法({模板:`<div><h2>你好!</h2><路由器插座></路由器插座>
`,指令:ROUTER_DIRECTIVES})@RouteConfig([{路径:'/',组件:ChildCmp,如:'ChildCmp'}])类 HelloCmp { }//**************************** HOME 组件 ***********************************@成分({选择器:'home-cmp'})@看法({模板:`<div><h2>欢迎回家</h2>
`})类 HomeCmp {}//**************************** APP组件************************************@成分({选择器:'app-cmp'})@看法({模板:`<div><h1>你好{{message}}!</h1><a [router-link]="['./HomeCmp']">home</a><a [router-link]="['./HelloCmp']">hello</a><小时><路由器插座></路由器插座>
`,指令:ROUTER_DIRECTIVES})@RouteConfig([{路径:'/',组件:HomeCmp,如:'HomeCmp'}{path: '/hello/...', 组件: HelloCmp, as: 'HelloCmp'}])出口类应用{消息:字符串 = '世界';}引导程序(应用程序,[ROUTER_BINDINGS,绑定(APP_BASE_HREF).toValue(location.pathname)]);
当我删除子路由时,它工作正常.但是对于子路由,我得到以下错误.
例外:链接 "["HelloCmp"]" 无法解析为终端或异步指令.在 [空]
我关注了这里提到的文章.但无法让它工作.有人可以帮忙吗?谢谢
解决方案
您只需要在 routerLink
中导入子组件,然后您的代码就可以正常工作了.例如:
<a [routerLink]="['./HelloCmp','ChildCmp']">hello</a>
这是您的代码的工作 plnkur.Plunker 代码
有关此路由的更多信息,请参阅 github 上的此问题 此处
更新到 Angular 2 测试版
从 Angular 2 beta 开始,这里有一些变化:
router-link
已更改为 routerLink
你也可以使用 useAsDefault : true
而不是像这样在 routerLink 的时候提供 child -
{path: '/blabla', components: ABC , name : ABC, useAsDefault: true}
Angular 2 version: 2.0.0-alpha.44
I've been trying to do routing in Angular 2. Though i was able to do the normal routing done, i am facing some issues when i introduce child routes. Here is the example on plnkr (http://plnkr.co/edit/Y5doqU1WcEe4Ldr7KfPJ)
Below is the code for quick reference. I am trying to achieve below routing
App
/\
/ \
HomeCmp HelloCmp
\
\
ChildCmp
And below is how i've configured my paths
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)
]);
When i remove child routes it works fine. But with child routes i get below error.
EXCEPTION: Link "["HelloCmp"]" does not resolve to a terminal or async instruction. in [null]
I followed the article mentioned here. But not able to get it working. Can someone please help ? Thanks
解决方案
You just need to import the child component in the routerLink
then your code is working fine. For example:
<a [routerLink]="['./HelloCmp','ChildCmp']">hello</a>
Here is the working plnkur of your code.
Plunker Code
For more info about this routing see this issue on github here
Update to Angular 2 beta
As of Angular 2 beta some changes are here:
router-link
has been changed to routerLink
You can also use useAsDefault : true
instead of providing child at the time of routerLink like this -
{path: '/blabla', components: ABC , name : ABC, useAsDefault: true}
这篇关于如何在 Angular 2 中使用子路由的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!