如何在Angular 2中使用子路由

时间:2015-11-21 05:57:43

标签: angular angular-routing

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提到的文章。 但无法让它发挥作用。有人可以帮忙吗?谢谢

2 个答案:

答案 0 :(得分:11)

您只需要在routerLink中导入子组件,然后您的代码就可以了。例如:

<a [routerLink]="['./HelloCmp','ChildCmp']">hello</a>

这是您的代码的工作plnkur。 Plunker Code

有关此路由的详细信息,请参阅github上的此问题here

更新Angular 2 beta

从Angular 2 beta开始,这里有一些变化:

  • router-link已更改为routerLink

  • 你也可以使用useAsDefault : true代替在routerLink时提供这样的孩子 -

    {路径:&#39; / blabla&#39;,组件:ABC,名称:ABC,useAsDefault:true}

答案 1 :(得分:5)

Angular4子路由 -

  

让我先定义一下路由配置,每条路由都可以有一个   属性称为子属,您可以在其中定义子路由   路由。

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'find', redirectTo: 'search'},
  {path: 'home', component: HomeComponent},
  {path: 'search', component: SearchComponent},
  {
  path: 'artist/:artistId',
  component: ArtistComponent,
  children: [
  {path: '', redirectTo: 'tracks'}, ①
  {path: 'tracks', component: ArtistTrackListComponent}, ②
  {path: 'albums', component: ArtistAlbumListComponent}, ③
  ]
  },
  {path: '**', component: HomeComponent}
];
  1. 如果用户导航到说/ artist / 1234,它将重定向到 / artist / 1234 / tracks。
  2. 此路线与/ artist / 1234 / tracks等网址匹配。
  3. 此路线与/ artist / 1234 / albums等网址匹配。
  4. <h1>Artist</h1>
    <p>
      <a [routerLink]="['./tracks']">Tracks</a> |
      <a [routerLink]="['./albums']">Albums</a>
    </p>
    <router-outlet></router-outlet>