Comment utiliser les itinéraires enfants dans Angular 2
Angulaire 2 version: 2.0.0-alpha.44
J'ai essayé de faire le routage dans Angulaire 2. Si j'étais capable de faire le routage normal fait, je suis confronté à quelques problèmes, quand je présenterai enfant routes. Voici l'exemple sur plnkr (http://plnkr.co/edit/Y5doqU1WcEe4Ldr7KfPJ)
Ci-dessous est le code de référence rapide. Je suis en train de réaliser en dessous de routage
App
/\
/ \
HomeCmp HelloCmp
\
\
ChildCmp
Et ci-dessous 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)
]);
Quand j'ai retirer les enfants des routes, il fonctionne très bien. Mais avec des enfants routes-je obtenir de l'erreur ci-dessous.
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 s'il vous plaît aider ? Grâce
source d'informationauteur Prakash Shanbhag
Vous devez vous connecter pour publier un commentaire.
Vous avez juste besoin d'importer le composant enfant dans le
routerLink
puis votre code fonctionne bien. Par exemple:Ici est le travail plnkur de votre code.
Plunker Code
Pour plus d'informations sur ce routage voir ce problème sur github ici
Mise à jour Angulaire 2 beta
Comme Angulaire 2 beta certains changements sont ici:
router-link
a été modifié pour routerLinkVous pouvez également utiliser
useAsDefault : true
au lieu de fournir de l'enfant au moment de routerLink comme celui -{path: '/blabla', components: ABC , nom : ABC, useAsDefault: true}
Angular4 enfant de Routage -
/artiste/1234/pistes .