Come passare i dati dal componente router ai componenti figlio in Aurelia?

Question

Diciamo che abbiamo un componente in Aurelia denominato UserRouter, che è un router figlio e gestisce il routing a UserProfile, UserImages e UserFriends.

Desidero che UserRouter carichi l'utente dall'API (su canActivate) e quindi passa questo dato utente ai componenti secondari.

Il caricamento dei dati va bene, come posso passare ai componenti secondari in modo che possano leggerli tutti? per esempio. posizionando un attributo su <router-view>.

Ho provato l'argomento bindingContext sul metodo bind() dei componenti secondari, ma questo non ha funzionato.

Grazie

Answer 1

ho elaborato una soluzione per questo, è sufficiente dire l'iniettore per iniettare la dipendenza un'istanza del componente router genitore utilizzando Parent.of (YourComponent).

import {inject, Parent} from 'aurelia-framework'; 
import {UsersRouter} from './router'; 

@inject(Parent.of(UsersRouter)) 
export class UserImages { 
    constructor(usersRouter) { 
     this.usersRouter = usersRouter; 
    } 

    activate() { 
    this.user = this.usersRouter.user; 
    } 
} 

È possibile anche in realtà perdere la parte Parent.of perché il sistema Aurelia DI sta facendo strada in su.

import {inject} from 'aurelia-framework'; 
import {UsersRouter} from './router'; 

@inject(UsersRouter) 
export class UserImages { 
    constructor(usersRouter) { 
     this.usersRouter = usersRouter; 
    } 

    activate() { 
    this.user = this.usersRouter.user; 
    } 
} 

Answer 2

È possibile utilizzare il event aggregator di pubblicare fuori un evento con i dati e le componenti secondarie potrebbero sottoscrivere e ascoltare per quell'evento. Ciò eviterebbe l'accoppiamento tra di loro. Tuttavia, potrebbe esserci un lato negativo a cui non penso.

Answer 3

Si potrebbe associare l'oggetto router/utente al <router-view>

<router-view router.bind="router"></router-view>

Ho lo stesso problema, quindi mi piacerebbe vedere che cosa si arriva con !!

Answer 4

Il modo in cui ho fatto questo, è stato con l'aggiunta di ulteriori informazioni al bambino definizione di router ad esempio:

configureRouter(config, router){ 
    config.map([ 
    { route: [''], name: 'empty', moduleId: './empty', nav: false, msg:"choose application from the left" }, 
    { route: 'ApplicationDetail/:id', name: 'applicationDetail', moduleId: './applicationDetail', nav: false, getPickLists :() => { return this.getPickLists()}, notifyHandler :()=>{return this.updateHandler()} } 
]); 

nel primo percorso da questo esempio, passo in un messaggio di testo con l'aggiunta di mia porperty 'msg 'all'oggetto percorso. nel secondo percorso passo in alcuni gestori di eventi, ma avrei potuto essere alcuni oggetti personalizzati o altro.

Nel childmodel ricevo questi elementi aggiuntivi nel metodo activate():

export class empty{ 
    message; 

    activate(params, routeconfig){ 
    this.message=routeconfig.msg || ""; 
    } 
} 

Credo che nel tuo caso, si dovrebbe aggiungere l'oggetto utente alla definizione router bambino.

Answer 5

È possibile implementare un metodo generico per passare gli oggetti:

configureRouter(config, router){ 
    this.router = router; 
    ... 

    this.router.navigateWithParams = (routeName, params) => { 
     let routerParams = this.router.routes.find(x => x.name === routeName); 
     routerParams.data = params; 
     this.router.navigate(routeName); 
    } 

} 

allora si può utilizzare a livello di codice come:

goToSomePage(){ 
    let obj = { someValue: "some data", anotherValue: 150.44} 
    this.router.navigateWithParams("someRoute", obj); 
} 

, infine, è possibile ottenere il parametro sulla pagina di destinazione:

activate(urlParams, routerParams) 
{ 
     this.paramsFromRouter = routerParams.data; 
}