【问题标题】：How to use child routes in Angular 2如何在 Angular 2 中使用子路由
【发布时间】：2017-08-30 22:37:09
【问题描述】：

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提到的文章。 但无法使其正常工作。有人可以帮忙吗？谢谢

【问题讨论】：

标签： angular angular-routing

【解决方案1】：

您只需要在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}

【讨论】：

@Pradeep Jain 非常感谢。如果我想从代码中调用路由而不使用 [router-link] 怎么办？就像上面例子中的 ex，使用 router.navigate(['./HelloCmp']).
@Pradeep 知道了。我们需要使用 router.navigate(['./HelloCmp', 'ChildCmp')。阅读您建议的链接后，它变得清晰起来。我还发现了一个更好的链接 (angular.io/docs/js/latest/api/router/RouterLink-class.html)
你会提供 plunkr 来显示 router.navigate 的使用情况，正如你所说的那样。
@Pradeep：在这里。您可以通过单击以编程方式导航到 HelloCmp 的按钮导航到“./HelloCmp”。 Plnkr 链接在这里link
不会是['HelloCmp','ChildCmp'] 和['./HelloCmp','ChildCmp'] 一样吗？

【解决方案2】：

Angular4 子路由 -

我先定义一下路由配置，每条路由可以有一个名为 children 的属性，您可以在其中定义 this 的子路由路线。

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}
];

如果用户导航到说 /artist/1234，它将重定向到 /artist/1234/tracks .
此路由匹配 /artist/1234/tracks 之类的 URL。
此路由匹配 /artist/1234/albums 之类的 URL。

<h1>Artist</h1>
<p>
  <a [routerLink]="['./tracks']">Tracks</a> |
  <a [routerLink]="['./albums']">Albums</a>
</p>
<router-outlet></router-outlet>

【讨论】：