web-dev-qa-db-fra.com

Les parcours des enfants angulaires2 ne fonctionnent pas

J'utilise @angular rc4 "@angular/router": "^3.0.0-beta.2"

Je n'ai pas réussi à faire fonctionner les itinéraires enfants. Lorsque je commence à ajouter des itinéraires enfants, j'obtiens de nombreux types d'erreurs: Voici le code de mon itinéraire: 

{ path: '', redirectTo: 'parentComp'},
{ path: 'parentComp', component: parentContainer, 
        children: [
            {path: 'componenta', component: ComponentA }
        ]
    }

EXCEPTION: erreur lors de l'instanciation de Routeur! .BrowserDomAdapter.logError @ browser_adapter.js: 84BrowserDomAdapter.logGroup @ browser_adapter.js: 94ExceptionHandler.call @ exception_handler.js: 65 (fonction anonyme) @ application_ref.js: 337schedulerFn @ async.js: 139SafeSubscriber .__ tryOrUnsub @ Subscriber.js: 223SafeSubscriber.next @ Subscriber.js: 172Subscriber._next @ Subscriber.js: 125Subscriber.next @ Subscriber.js: 89Subject.next @ Subject.js: 55EventEmitter.emit @ async.js: 127onError @ ng_zone.js: 124onHandleError @ ng_zone_impl.js: 74ZoneDelegate.handleError @ zone.js: 327Zone.runTask @ zone.js: 259ZoneTask.invoke @ zone.js: 423 browser_adapter.js: 84 EXCEPTION ORIGINALE: Erreur: configuration de route non valide '{path: "", redirectTo: "activity"} ": veuillez fournir" pathMatch ". Le La valeur par défaut de 'pathMatch' est 'prefix', mais l'intention est souvent de utilisez 'full'.BrowserDomAdapter.logError @ browser_adapter.js: 84ExceptionHandler.call @ exception_handler.js: 74 (fonction anonyme) @ application_ref.js: 337schedulerFn @ async.js: 139SafeSubscriber .__ tryOrUnsub @ Subscriber.js: 223SafeSubscriber.next @ Subscriber.js: 172Subscriber._next @ Subscriber.js: 125Subscriber.next @ Subscriber.js: 89Subject.next @ Subject.js: 55EventEmitter.emit @ async.js: 127onError @ ng_zone.js: 124onHandleError @ ng_zone_impl.js: 74ZoneDelegate.handleError @ zone.js: 327Zone.runTask @ zone.js: 259ZoneTask.invoke @ zone.js: 423 browser_adapter.js: 84 STACKTRACE ORIGINAL: BrowserDomAdapter.logError @ browser_adapter.js: 84ExceptionHandler.call @ exception_handler.js: 77 (fonction anonyme) @ application_ref.js: 337schedulerFn @ async.js: 139SafeSubscriber .__ tryOrUnsub @ Subscriber.js: 223SafeSubscriber.next @ Subscriber.js: 172Subscriber._next @ Subscriber.js: 125Subscriber.next @ Subscriber.js: 89Subject.next @ Subject.js: 55EventEmitter.emit @ async.js: 127onError @ ng_zone.js: 124onHandleError @ ng_zone_impl.js: 74ZoneDelegate.handleError @ zone.js: 327Zone.runTask @ zone.js: 259ZoneTask.invoke @ zone.js: 423

Alors j'ajoute le pathMatch: 

{ path: '', redirectTo: 'parentComp', pathMatch: 'full'},
{ path: 'parentComp', component: ActivityContainer, 
    children: [
        {path: 'componenta', component: ComponentA }
    ]
}

Voici l'erreur que je reçois: 

app/bootstrapper.routes.ts (5,7): erreur TS2322: Type '({chemin: chaîne; redirectTo: chaîne; cheminMatch: chaîne;} | {chemin: chaîne; composant: type de type. .. 'n'est pas assignable au type' Route [] '. Type' {chemin: string; redirectTo: string; pathMatch: string;} | {chemin: string; composant: typeof paren ... ' n'est pas assignable au type 'Route'.

Je me suis rendu compte que beaucoup des réponses écrites concernaient l’utilisation de la bonne version, mais j’utilise la dernière version appropriée pour les itinéraires, comme dans angular.io J'ai donc également déconseillé de faire appel à routeur, le nombre d'erreurs qui apparaissent mais je ne pouvais toujours pas faire fonctionner les itinéraires enfants. 

Je vais avoir mon Shell qui chargera les routes dans son routeur-prise, mais la minute où je vais aux routes pour enfants, rien ne fonctionne. Aide appréciée. 

Merci 

typescriptangularangular2-routing
12
Joe Saad

Un routeur angulaire considère un itinéraire avec des enfants comme un itinéraire non terminal et achemine uniquement aux itinéraires terminaux. Le routeur Angular s'attend à ce que route ait une entrée par défaut pour le chemin: ''. Fils dans votre cas, vous devez ajouter le code ci-dessous dans le tableau des enfants

children: [
        {path: '', redirectTo: componenta, pathMatch: 'full'}
    ]

De plus, chaque fois que nous utilisons redirectTo, la stratégie pathMatch doit être full car nous voulons que le chemin exact corresponde à la redirection. Si nous conservons prefix (non spécifié puis préfixe par défaut), angular fera correspondre beaucoup de routes à cette entrée et provoquera diverses erreurs. 

Voir cette question pour plus de détails detail

Vous devriez vous débarrasser de toute importation de routeur obsolète, car l'erreur indique une incompatibilité entre la déclaration de la route et le fournisseur de la route. Vous devez utiliser le code ci-dessous dans le composant bootstrap pour fournir des routeurs. 

provideRouter(routes)// routes is array of routes defined in your code.

Regardez aussi l'excellent article . L'article est en version alpha8 mais la version bêta2 n'a pas de modification majeure, à la différence que terminal:true est remplacé par pathMatch:full.

21
Arpit Agarwal

Essayez redirectTo: '/parentComp' au lieu de redirectTo: 'parentComp'. 

0
Shivam

Vous ne savez pas ce que vous essayez de faire ici.

C'est ce qui fonctionne pour moi:

{
    path: 'object', --> base path
    component: ObjectComponent, --> parent component, need to end with "Component"
    children: [
        {path: '', redirectTo: 'childa', pathMatch: 'full'}, --> subpath default, this would redirect "domain/object" to "domain/object/childa"
        {path: 'childa', component: AComponent}, --> this would load AComponent into router-outlet tag and set Your path to "domain/object/childa"
        {path: 'childb', component: BComponent}, --> this would load BComponent into router-outlet tag  and set Your path to "domain/object/childb"
    ]

En gros, je pense que vous devez définir votre redirection racine (chemin: '') en tant que nœud enfant.

Ceci est une partie du modèle ObjectComponent:

<button [routerLink]="['/object', 'childb']">Child B</button>
<router-outlet></router-outlet>

@Arpit Agarwal answer vous en donne également beaucoup si des détails sur le fonctionnement interne ...

0
Robert

Le nom de la classe de composant doit être écrit en majuscule et se terminer par le mot "Composant". Le tutoriel explique cela dans l'une de leurs premières sections: https://angular.io/docs/ts/latest/tutorial/toh-pt3.html . 

L'exemple dans leur application: 

import { Component } from '@angular/core';

@Component({
  selector: 'hero-detail',
})
export class HeroDetailComponent {
}

Puis l'ajoutant au routeur:

  { path: 'detail/:id', component: HeroDetailComponent },

Essayez de changer les noms de classe de vos composants et de les recompiler.

0
Richard H