Как использовать дочерние маршруты в угловых версиях 2

Question

Угловых 2: 2.0.0-alpha.44

Я пытался сделать маршрутизацию в угловых 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. Но не в состоянии заставить его работать. Кто-то может помочь? Спасибо

Answer 1

Вам просто нужно импортировать дочерний компонент в routerLink, тогда ваш код работает нормально. Например:

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

Вот рабочий plnkur вашего кода. Plunker Code

Для получения дополнительной информации об этой маршрутизации см этого вопроса на GitHub here

Update угловых 2 беты

С угловой 2 беты некоторых изменения здесь:

• router-link был изменен на routerLink

• Вы также можете использовать useAsDefault : true вместо обеспечения ребенка во время routerLink, как это -

  {путь: '/ BlaBla', компоненты: ABC, имя: ABC, useAsDefault: истинные}

Answer 2

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. Если пользователь переходит сказать/артист/1234 он будет перенаправлять /художника/1234/дорожкам.
2. Этот маршрут соответствует URL-адресу, например/artist/1234/tracks.
3. Этот маршрут соответствует URL-адресу, например/artist/1234/albums.

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