2017-05-28 1 views
5

Betrachten Sie die folgende Route Konfiguration:Wie wird eine Route des aufgelösten Daten aktualisieren

const routes: Routes = [ 
    { 
    path: '', 
    component: AppComponent, 
    resolve: { 
     app: AppResolver 
    }, 
    children: [ 
     { 
     path: 'user/:uid', 
     resolve: { 
      user: UserResolver 
     }, 
     children: [ 
      { 
      path: '', 
      component: ViewUserComponent 
      }, 
      { 
      path: 'edit', 
      component: EditUserComponent 
      } 
     ] 
     } 
    ] 
    } 
]; 

Die Benutzerdaten von UserResolver für alle Kinder der Route /user/:uid abgerufen werden. Mit diesen Daten kann ein Benutzerprofil angezeigt werden, indem Sie zu /user/:uid navigieren und dann durch Navigieren zu /user/:uid/edit bearbeitet werden. Nach einer erfolgreichen Bearbeitung würde man erwarten, dass das Profil des Benutzers (/user/:uid) des Benutzers umgeleitet wird.

Sowohl die Ansichts- als auch die Bearbeitungsseite sind untergeordnete Elemente der aufgelösten Route. Der Resolver wird jedoch nicht ausgelöst, wenn von einem zum anderen navigiert wird.

Bei der Rückkehr von der Edit-Komponente zur View-Komponente werden daher immer noch die alten, nicht aktualisierten Daten angezeigt.

Gibt es eine Möglichkeit, die gelösten user Daten zu ungültig zu machen, um den Resolver zu zwingen, es erneut vom Server zu holen? Oder gibt es einen anderen Weg, ein solches Ergebnis zu erzielen?

Die app Daten sind unverändert, wir sollten sie nicht neu laden müssen.

+0

Verwenden Sie den geteilten Dienst anstelle der übergeordneten Komponente für den Umgang mit Daten. –

+0

@HarryNinh Ich könnte, aber es würde bedeuten, den Code zu subskribieren, der den Route-Parameter abonniert, und den Dienst in jeder untergeordneten Komponente aufruft, während eine Zwischenspeicherstrategie im gemeinsam genutzten Dienst erneut implementiert wird. Dies scheint den Zweck der Routenresolver zu besiegen. – vlaurin

+0

Viele und viele suchen zu diesem Thema. Soweit ich das beurteilen kann, besteht die einzige Möglichkeit darin, ein Ereignis zu abonnieren und die Daten manuell neu zu laden. Im Idealfall würden Sie die App strukturieren. Damit können Sie das durch Code-Wiederverwendung tun, aber selbst das ist eine Herausforderung, da die Wiederverwendung eines Resolve aufgrund des Router-Status nicht trivial ist. Ich habe mich entschieden, eine öffentliche Funktion in meinem Resolve zu erstellen, die wiederverwendet werden kann und die Auflösungsfunktion selbst umgehen kann. Dies ist ein bestimmter Bereich, in dem es Verbesserungen geben könnte. Ich habe viele Leute mit dieser Art von Problem gesehen. –

Antwort

3

Es gibt einen Parameter, den Sie in Ihrer Routenkonfiguration verwenden können, der als 'runGuardsAndResolvers' bezeichnet wird und sich auf die Ausführung des Resolvers auswirkt. In diesem Fall sollten Sie es auf "immer" einstellen. Dies bedeutet, dass der Resolver immer dann ausgeführt wird, wenn sich die untergeordneten Routen dieser Route ändern. Weitere Informationen finden Sie unter the route documentation.

5

Ich habe die Lösung 'runGuardsAndResolvers' getestet, es funktioniert für meinen Anwendungsfall, der Resolver wird bei jeder Unterseitenänderung aufgerufen.

Es ist nur das Hinzufügen dieser Option der Teil Ihrer Routen, die Sie auf diese Weise verhalten möchten.

export const ROUTES: any = [ 
    { 
    path: 'project/:name', 
    runGuardsAndResolvers: "always", 
    component: ProjectComponent, 
    resolve: { project: ProjectResolver }, 
    children: [ 
     ... 
Verwandte Themen