如何角使用儿童路线2 [英] How to use child routes in Angular 2

问题描述

2角版本：2.0.0-alpha.44

我一直试图做的角2路由虽然我能够做正常的路由做的，当我介绍孩子的路线我面临的一些问题。这里是plnkr的例子（ http://plnkr.co/edit/Y5doqU1WcEe4Ldr7KfPJ ）

下面是code为快速参考。我想实现以下路由

 应用
                                  / \\
                                 / \\
                             HomeCmp HelloCmp
                                      \\
                                       \\
                                     ChildCmp
 

和下面是我是如何配置我的路径

 进口{引导，约束，组件，查看}从'angular2 / angular2
进口{RouteConfig，RouteParams，ROUTER_DIRECTIVES，APP_BASE_HREF，ROUTER_BINDINGS}从'angular2 /路由器@零件（{
  选择：儿童CMP
}）
@视图（{
  模板：`
    ＆LT; D​​IV＆GT;
      ＆LT; H3＆GT;怎么了＆LT; / H3 GT＆;
    ＆LT; / DIV＆GT;
  `
}）
类ChildCmp {}// ************************你好组件********************** *************
@零件（{
  选择：'你好-CMP
}）
@视图（{
  模板：`
    ＆LT; D​​IV＆GT;
      ＆LT; H2＆GT;您好！有＆LT; / H＆GT;
      ＆LT;路由器出口＆GT;＆LT; /路由器出口＆GT;
    ＆LT; / DIV＆GT;
  `
  指令：ROUTER_DIRECTIVES
}）
@RouteConfig（[
  {路径：'/'，分量：ChildCmp，如：ChildCmp'}
]）
类HelloCmp {}// ************ HOME组件******************** ***************
@零件（{
  选择：家-CMP
}）
@视图（{
  模板：`
    ＆LT; D​​IV＆GT;
      ＆LT; H2＆GT;欢迎回家＆LT; / H＆GT;
    ＆LT; / DIV＆GT;
  `
}）
类HomeCmp {}// ******** APP组件********************* ****************
@零件（{
  选择：应用程序-CMP
}）
@视图（{
  模板：`
    ＆LT; D​​IV＆GT;
      ＆LT; H1＆GT;您好{{}信息}＆LT;！/ H1＆GT;
      ＆LT; A [路由器链接] =['./ HomeCmp']＆GT;家庭和LT; / A＆GT;
      ＆LT; A [路由器链接] =['./ HelloCmp']＆GT;＆打招呼LT; / A＆GT;
      ＆LT;小时＆GT;
      ＆LT;路由器出口＆GT;＆LT; /路由器出口＆GT;
    ＆LT; / DIV＆GT;
  `
  指令：ROUTER_DIRECTIVES
}）
@RouteConfig（[
  {路径：'/'，分量：HomeCmp，如：HomeCmp'}
  {路径：'/你好/ ...'，分量：HelloCmp，如：HelloCmp'}
]）
出口类应用{
  消息：字符串=世界;
}引导程序（App [
  ROUTER_BINDINGS，
  绑定（A​​PP_BASE_HREF）.toValue（location.pathname）
]）;
 

当我删除子路由，它工作正常。但随着孩子的路线，我得到下面的错误。

 异常：链接[HelloCmp]没有解决到终端或异步指令。在[空]
 

我跟这里的文章提到 。 但是没能得到它的工作。是否有人可以帮助？感谢

解决方案

您只需要导入子组件在路由器链路那么你的code是做工精细。例如：

 ＆LT; A [路由器链接] =['./ HelloCmp'，'ChildCmp']＆GT;＆打招呼LT; / A＆GT;
 

这是你的code的工作plnkur。
http://plnkr.co/edit/ABMjGbJbbURBD9KioV7v?p=$p$pview

有关此路由的详细信息请参见github上这里

更新到公测angular2

作为angular2测试的一些变化的位置 -

• 路由器链路已更改为routerLink




• 您也可以使用 useAsDefault：真正的，而不是在routerLink像这样的时间内提供孩子 -

  {路径：'/布拉布拉'，成分：ABC，名称：ABC，useAsDefault：真正}

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 router-link then your code is working fine. for example:

<a [router-link]="['./HelloCmp','ChildCmp']">hello</a>

here is the working plnkur of your code. http://plnkr.co/edit/ABMjGbJbbURBD9KioV7v?p=preview

FOR more info about this routing see this issue on the github here

Update to angular2 beta

as of angular2 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}

这篇关于如何角使用儿童路线2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！