wake-up-neo.net

Angular 4: Das Routen zu einer Route funktioniert nicht

Es gibt ein grundlegendes Konzept des Routings in Angular 4, das ich nicht verstehe.

index.html :

<base href="/">

Dateistruktur:

- app
|- app.routings.ts
|- collections
|-- collection.component.ts
|-- collection.component.html
|-- collectioninfo.component.ts
|-- collectioninfo.component.html
|- shared
|-- header.component.html
|-- header.component.ts

Ich habe einen Link in meiner header.component.html:

<a class="nav-link" [routerLink]="['/collections']">
    Collections
</a>

Wenn ich darauf klicke, lande ich auf localhost: 4200/collection. Wenn Sie auf eine Schaltfläche klicken, wird die URL programmgesteuert geändert (in collection.component.ts):

this.router.navigate(['/collections/', collection.name]);

Ich lande bei localhost: 4200/collection/name - alles in Ordnung. Jetzt möchte ich programmatisch auf/Collections zurückgreifen (in collectioninfo.component.ts):

this.router.navigate(['/collections']);

Das geht aber nicht. Die URL ändert sich nicht und es wird eine Fehlermeldung angezeigt, die besagt, dass ein Parameter nicht geladen werden konnte. Daher wird offenbar/Collections/name erneut geladen. Ich denke, es könnte ein Pfadproblem sein, aber solche Dinge funktionieren auch nicht:

this.router.navigate(['../collections']);

Weitere Informationen: Wenn ich die Seite manuell neu lade, während/die Sammlungen/Sammlungen vorhanden sind, werde ich erneut zur Startseite weitergeleitet. Ich denke jedoch, dass dies ein anderes Problem ist und nicht mit diesem Verhalten zusammenhängt.

app.routing.ts :

const APP_ROUTES: Routes = [
  ...
  { path: 'collections', component: CollectionComponent },
  { path: 'collections/:id', component: CollectionInfo },
];
7
user3255061

Es stellt sich heraus, dass mein Firebase-Code fehlerhaft ist - er versucht die Seite neu zu laden, bevor er zu einer anderen Route wechselt. Dies führte zu einem Fehler, da einige Parameter fehlten, die von der vorherigen Route übergeben wurden.

export const routing = RouterModule.forRoot(APP_ROUTES, { enableTracing: true })

in app.routing.ts war sehr hilfreich beim Debuggen.

1
user3255061

In Ihrem relativen Pfad this.router.navigate(['../collections']); versuchen Sie, zu localhost:4200/collections/collections zu navigieren. this.router.navigate(['../']); ausprobieren

Wenn dies nicht funktioniert, geben Sie ActivatedRoute auch als relativeTo-Parameter an:

constructor(route: ActivatedRoute, router: Router) {}

navigate() {
  this.router.navigate(['../'], { relativeTo: this.route });
}

relativeTo erstellt einen Pfad relativ zu dem von Ihnen angegebenen Eintrag und muss nicht unbedingt die aktuelle Route sein.

3
tgrass12