webentwicklung-frage-antwort-db.com.de

Angular2-Kinderrouten funktionieren nicht

Ich verwende @angular rc4 "@angular/router": "^3.0.0-beta.2"

Ich bin nicht in der Lage, untergeordnete Routen zum Laufen zu bringen, wenn ich anfange, untergeordnete Routen hinzuzufügen, bekomme ich viele Arten von Fehlern: Hier ist mein Routencode: 

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

AUSNAHME: Fehler bei der Instantiierung von Router! .BrowserDomAdapter.logError @ browser_adapter.js: 84BrowserDomAdapter.logGroup @ browser_adapter.js: 94ExceptionHandler.call @ exception_handler.js: 65 (anonyme Funktion) @ 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 AUSNAHME: Fehler: Ungültige Routenkonfiguration der Route '{path: "", redirectTo: "activity"}': Bitte geben Sie 'pathMatch' an. Das Der Standardwert von 'pathMatch' lautet 'prefix', häufig wird jedoch mit .__ beabsichtigt. Verwenden Sie 'full'.BrowserDomAdapter.logError @ browser_adapter.js: 84ExceptionHandler.call @ exception_handler.js: 74 (anonyme Funktion) @ 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 (anonyme Funktion) @ 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

Also füge ich das pathMatch hinzu: 

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

Hier ist der Fehler, den ich bekomme: 

app/bootstrapper.routes.ts (5,7): Fehler TS2322: Typ '({Pfad: String; RedirectTo: String; PathMatch: String;} | {Pfad: String; Komponente: Typ von Pare. .. 'kann nicht dem Typ' Route [] 'zugeordnet werden. Typ' {Pfad: string; redirectTo: string; pathMatch: string;} | {Pfad: string; Komponente: typeof paren ... ' kann nicht dem Typ 'Route' zugeordnet werden.

Mir wurde klar, dass viele der Antworten darauf abzielten, die richtige Version zu verwenden, aber ich verwende die richtige neueste Version für Routen genauso wie in angle.io Daher habe ich auch Router-deprecated, um dies zu verringern Die Anzahl der aufgetretenen Fehler, aber ich konnte die untergeordneten Routen nicht zum Laufen bringen. 

Ich habe meine Shell, die in ihrem Router-Outlet die Routen laden wird, aber sobald ich zu untergeordneten Routen gehe, funktioniert nichts. Hilfe geschätzt. 

Vielen Dank 

12
Joe Saad

Ein Winkelrouter betrachtet eine Route mit Kindern als eine Route ohne Terminal, und Routing wird nur auf Terminalrouten durchgeführt. Angular Router erwartet, dass für route ein Standardeintrag für Pfad vorhanden ist: ''. In Ihrem Fall sollten Sie den Code in untergeordnetem Array hinzufügen

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

Wann immer wir redirectTo verwenden, sollte die pathMatch-Strategie full sein, da wir eine exakte Pfadanpassung zur Umleitung wünschen. Wenn wir prefix beibehalten (nicht spezifizieren, dann standardmäßig Präfix verwenden), würde dies dazu führen, dass angle viele Routen an diesen Eintrag anpasst und verschiedene Fehler verursacht. 

Siehe diese Frage für weitere detail

Sie sollten jeden Import von Router-veraltet entfernen, da die Fehlerpunkte auf eine Abweichung zwischen der Routendeklaration und dem Routenanbieter zurückzuführen sind. Sie müssen den folgenden Code in der Bootstrap-Komponente verwenden, um Router bereitzustellen. 

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

Schauen Sie sich auch großartige article an. Der Artikel befindet sich in der alpha8-Version, aber Beta2 hat keine größeren Änderungen, außer dass terminal:true durch pathMatch:full ersetzt wird.

21
Arpit Agarwal

Versuchen Sie redirectTo: '/parentComp' anstelle von redirectTo: 'parentComp'

0
Shivam

Nicht sicher, was Sie hier versuchen.

Das funktioniert für mich:

{
    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"
    ]

Grundsätzlich glaube ich, dass Sie Ihre root (path: '') -Umleitung als untergeordneten Knoten festlegen müssen.

Dies ist der ObjectComponent-Vorlagenteil:

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

Auch die Antwort von @Arpit Agarwal gibt Ihnen viele Details zum Innenleben ...

0
Robert

Der Name der Komponentenklasse sollte in der oberen Kamel-Schreibweise stehen und mit dem Wort "Component" enden. Das Tutorial erklärt dies in einem ihrer 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 fügen Sie es dem Router hinzu:

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

Versuchen Sie, die Komponentenklassennamen zu ändern und erneut zu kompilieren

0
Richard H