web-dev-qa-db-fra.com

Comment utiliser les routes enfants dans Angular 2

Version angulaire 2: 2.0.0-alpha.44

J'ai essayé de faire du routage dans Angular 2. Bien que j'aie pu faire le routage normal, je rencontre des problèmes lorsque j'introduis des routes enfants. Voici l'exemple sur plnkr ( http://plnkr.co/edit/Y5doqU1WcEe4Ldr7KfPJ )

Voici le code pour référence rapide. J'essaie de réaliser le routage ci-dessous

                                  App
                                  /\
                                 /  \
                             HomeCmp HelloCmp
                                      \
                                       \
                                     ChildCmp

Et voici comment j'ai configuré mes chemins

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

Lorsque je supprime des itinéraires enfants, cela fonctionne bien. Mais avec les itinéraires enfants, j'obtiens en dessous de l'erreur.

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

J'ai suivi l'article mentionné ici . Mais pas en mesure de le faire fonctionner. Quelqu'un peut-il m'aider? Merci

angularangular-routing
14
Prakash Shanbhag

Vous avez juste besoin d'importer le composant enfant dans le routerLink alors votre code fonctionne correctement. Par exemple:

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

Voici le plnkur de travail de votre code. Plunker Code

Pour plus d'informations sur ce routage, consultez ce problème sur github ici

Mettre à jour vers Angular 2 beta

À partir de Angular 2 beta, certains changements sont ici:

  • router-link a été remplacé par routerLink

  • Vous pouvez aussi utiliser useAsDefault : true au lieu de fournir un enfant au moment de routerLink comme ceci -

    {chemin: '/ blabla', composants: ABC, nom: ABC, useAsDefault: true}

11
Pardeep Jain

Routage enfant Angular4 -

Permettez-moi d'abord de définir la configuration de l'itinéraire, chaque itinéraire peut avoir une propriété appelée enfants où vous pouvez définir les itinéraires enfants de cet itinéraire.

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. Si un utilisateur navigue vers/artiste/1234, il sera redirigé vers/artiste/1234/pistes.
  2. Cette route correspond à une URL comme/artist/1234/tracks.
  3. Cette route correspond à une URL comme/artist/1234/albums.
<h1>Artist</h1>
<p>
  <a [routerLink]="['./tracks']">Tracks</a> |
  <a [routerLink]="['./albums']">Albums</a>
</p>
<router-outlet></router-outlet>
5
Balwant Padwal