Wie Kind Routen in Angular 2

Question

Angular 2-Version verwenden: 2.0.0-alpha.44

ich versucht habe Routing in Angular 2. zu tun Obwohl ich in der Lage war, den normalen Routing getan zu tun Ich stehe vor einigen Problemen, wenn ich Kinderrouten einführe. Hier ist das Beispiel auf PLNKR (http://plnkr.co/edit/Y5doqU1WcEe4Ldr7KfPJ)

Unten ist der Code für die Kurzübersicht. Ich versuche, unter Routing

        App 
            /\ 
           /\ 
          HomeCmp HelloCmp 
             \ 
             \ 
            ChildCmp 

Und unten zu erreichen ist, wie ich meine Pfade konfiguriert haben

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

Wenn ich Kind Routen entfernen es funktioniert gut. Aber mit Kinderrouten komme ich unter Fehler.

EXCEPTION: Link "["HelloCmp"]" does not resolve to a terminal or async instruction. in [null] 

Ich folgte dem Artikel erwähnt here. Aber nicht in der Lage, es zum Laufen zu bringen. Kann mir bitte jemand helfen? Danke

Answer 1

Sie müssen nur die Kindkomponente in der routerLink importieren, dann funktioniert Ihr Code gut. Zum Beispiel:

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

Hier ist die Arbeit plnkurs Ihres Codes. Plunker Code

Weitere Informationen zu diesem Routing sehen dieses Problem auf Github here

Update Angular 2 beta

Ab Angular 2 Beta sind einige Änderungen hier:

• router-link wurde in routerLink

geändert

• Sie können auch useAsDefault : true anstelle der Kinder, wie dies zum Zeitpunkt der Router Bereitstellung verwenden -

  {path: '/ blabla', Komponenten: ABC, Name: ABC, useAsDefault: true}

Answer 2

Angular4 Kind Routing -

Lassen Sie mich zunächst die Strecke Konfiguration definieren, wobei jede Strecke ein Eigenschaft namens Kinder können in dem Sie die Kinderwege definieren diese Route.

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. Wenn ein Benutzer/Künstler zu sagen navigiert/1234 es /Künstler/1234/Tracks umleitet.
2. Diese Route entspricht einer URL wie/artist/1234/tracks.
3. Diese Route entspricht einer URL wie/artist/1234/albums.

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