2016-07-31 19 views
7
nicht

Ich verwende @angular rc4 "@angular/router": "^3.0.0-beta.2"Angular2 Kind Routen arbeiten

Ich habe nicht in der Lage gewesen Kind Routen zu bekommen arbeiten, wenn ich Hinzufügen von Routen Kind beginnen i viele Arten von Fehlermeldungen erhalten: Hier ist meine Route Code :

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

EXCEPTION: Error during instantiation of Router!.BrowserDomAdapter.logError @ browser_adapter.js:84BrowserDomAdapter.logGroup @ browser_adapter.js:94ExceptionHandler.call @ exception_handler.js:65(anonymous function) @ 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 ORIGINAL EXCEPTION: Error: Invalid route configuration of route '{path: "", redirectTo: "activity"}': please provide 'pathMatch'. The default value of 'pathMatch' is 'prefix', but often the intent is to use 'full'.BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:74(anonymous function) @ 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 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:77(anonymous function) @ 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

So füge ich die pathMatch:

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

Hier ist der Fehler, den ich bekommen:

app/bootstrapper.routes.ts(5,7): error TS2322: Type '({ path: string; redirectTo: string; pathMatch: string; } | { path: string; component: typeof pare...' is not assignable to type 'Route[]'. Type '{ path: string; redirectTo: string; pathMatch: string; } | { path: string; component: typeof paren...' is not assignable to type 'Route'.

Ich erkannte, dass viele der schriftlichen Antworten darum, sicherzustellen, waren die richtige Version zu verwenden, aber ich bin die richtige späteste für Strecken mit nur wie in angular.io Also habe ich auch router-deprecated mit ihm, um die Anzahl der Fehler, die angezeigt werden, aber immer noch, konnte ich nicht die Child-Routen funktionieren.

Ich habe meine Shell, die in ihrem Router-outlet die Routen laden wird, aber die Minute, die ich auf Kinderrouten gehe nichts arbeiten. Hilfe geschätzt.

Dank

Antwort

12

Angular Router eine Route mit Kindern als nicht-Terminal Weg und das Routing nur passiert mit Terminal Routen berücksichtigt. Der angulare Router erwartet für die Route einen Standardeintrag für den Pfad: ''. Son in Ihrem Fall sollten Sie unter Code bei Kindern Array hinzufügen

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

Außerdem, wenn wir redirectTo die pathMatch Strategie full sollte verwenden, da wir genaue Pfad Spiel umgeleitet werden soll. Wenn wir prefix beibehalten (nicht angeben, dann wird das Präfix standardmäßig verwendet), würde eckig eine große Anzahl von Routen zu diesem Eintrag finden und verschiedene Fehler verursachen.

Sehen Sie diese Frage für die weitere detail

Sie sollten zwischen Route Erklärung und Routen Anbieter jeglicher Import von Router-veraltet wie die Fehlerpunkte loswerden zu stimmen nicht überein. Sie müssen unter Code in Bootstrap-Komponente verwenden, um Router bereitzustellen.

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

Schauen Sie sich auch tolle article. Der Artikel ist auf alpha8 Version aber Beta2 hat keine große Veränderung außer terminal:true durch pathMatch:full ersetzt

+0

diese Lösungen ausprobiert. keine funktioniert. Code zu Children Array hinzugefügt, hatte alle pathMatch: full, keine Importe von Router-Deprecated und ProvideRouter (Routen) ist in meiner Bootstrap-Komponente. keine funktioniert. –

+0

fügen Sie einen Plünderer mit Problem hinzu, es sollte funktionieren, soweit ich weiß. Richten Sie Plunker wie folgt ein: http://plnkr.co/edit/?p=preview –

+0

pathMatch hinzufügen: 'full' hat mein Problem behoben, danke. – Salim

0

Versuchen redirectTo: '/parentComp' statt redirectTo: 'parentComp'.

0

Der Name der Komponentenklasse sollte im oberen Kamelfall geschrieben werden und im Wort "Komponente" enden. Das Tutorial erklärt dies in einem der ersten Abschnitte: https://angular.io/docs/ts/latest/tutorial/toh-pt3.html.

Das Beispiel in ihrer Anwendung:

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

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

Dann Zugabe es dann an den Router:

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

Versuchen Sie, Ihre Komponente Klassennamen zu ändern und neu zu kompilieren

Verwandte Themen