Angular 2 Routing ohne Nachladen Ansicht

Question

Ich baue eine einseitige Anwendung mit Angular 2, die Karten stark nutzt. Eine der Anforderungen besteht darin, dass beim Klicken auf die Karte die URL aktualisiert wird, sodass die Karte bei der Aktualisierung der Seite auf diesen Punkt gezoomt wird (und auch die Tiefenverknüpfung mit Punkten auf der Karte unterstützt wird).

Ich fragte mich, was wäre das Beste, um dies in Angular 2 zu erreichen? Auf einem hohen Niveau scheint ein Router die offensichtliche Wahl zu sein, aber ich bin mir nicht sicher, ob er wirklich den Anforderungen entspricht.

Zum einen muss der ausgewählte Punkt auf der Karte ein paar verschiedene Komponenten auf der Karte aktualisieren (z. B. den Punkt auf der Karte, markieren Sie den Punkt in einer separaten Listenkomponente usw.). Daher glaube ich nicht, dass die router-outlet sehr sinnvoll ist - alle Ansichten sind immer gleichzeitig sichtbar - es ist nicht notwendig, die Ansichten basierend auf der ausgewählten Ansicht zu wechseln.

Ich bin auch nicht sicher, ob ich möchte, dass Aktionen auf der Grundlage der URL-Änderung ausgelöst werden, wenn Sie die Anwendung verwenden. Wenn Sie also auf einen Punkt auf der Karte klicken, wird bereits alles wie erwartet aktualisiert - der einzige Grund, warum die URL aktualisiert werden soll, ist, dass der Punkt beim erneuten Laden immer noch ausgewählt ist.

Jede Anleitung wird geschätzt.

Answer 1

Es klingt, als könnten Sie den CanReuse- und OnReuse-Haken in Ihrer Kartenkomponente verwenden, um zu verhindern, dass Ihre Karte neu geladen wird, wenn sich die Route ändert. Ihre Karte könnte auf die Änderung der Route reagieren, aber Sie können dieselbe Instanz beibehalten.

https://angular.io/docs/js/latest/api/router/CanReuse-interface.html https://angular.io/docs/js/latest/api/router-deprecated/index/OnReuse-interface.html

eine Komponente für Ihre Karte erstellen und binden, dass auf der Route, so dass es der Punkt nimmt Koordinaten als Routenparameter:

class MapComponent() implements OnActivate, CanReuse, OnReuse { 

    coordinates: { 
     x: number, 
     y: number 
    } 

    constructor(private params: RouteParams) {} 

    routerOnActivate() { 
     this.coordinates = parseCoords(this.params.getParam('coords')); 
    } 

    routerCanReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction) { 
     // return true if you can reuse this instance, otherwise reload 
    } 

    routerOnReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction) { 
     // update your map component and child components as needed 
    } 

} 

@RouteConfig([ 
    { path: '<base-map-url>/:coords', component: MapComponent, name: 'MapCmp' 
]) 
class AppComponent() { ... } 

Beachten Sie, dass dies eine API zur Verfügung gestellt ist durch der veraltete Router und wurde noch nicht im neuen Router implementiert. Ich bin nicht sicher, was der Plan für den RC-Router ist, aber ich würde vermuten, dass sie ähnliche Hooks in Kürze implementieren werden.

Alternativ können Sie in der Lage zu erreichen, was Sie den Standortdienst wollen mit:

https://angular.io/docs/ts/latest/api/common/index/Location-class.html