Jak przekazywać dane z komponentu routera do komponentów podrzędnych w Aurelia?

Question

Powiedzmy, że mamy składnik Aurelia o nazwie UserRouter, który jest routerem podrzędnym i obsługuje routing do UserProfile, UserImages i UserFriends.

Chcę, aby UserRouter wczytał użytkownika z API (na canActivate), a następnie przekazał te dane użytkownika do podelementów.

Ładowanie danych jest w porządku, w jaki sposób przekazać je do komponentów podrzędnych, aby wszyscy mogli je przeczytać? na przykład umieszczenie atrybutu na <router-view>.

Próbowałem argumentu bindingContext w metodzie bind() dla komponentów podrzędnych, ale to nie zadziałało.

Dzięki

Answer 1

I wypracowane rozwiązanie dla tego, po prostu powiedzieć wtryskiwacz zależnościach wstrzyknąć instancję komponentu routera rodzic stosując 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; 
    } 
} 

Można również naprawdę przegapić Parent.of część, ponieważ system Aurelia DI działa w górę.

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

Można użyć event aggregator publikować na imprezę z danych i elementów podrzędnych mógłby subskrybowania i nasłuchiwać tego zdarzenia. To pozwoliłoby uniknąć sprzężenia między nimi. Jednak może nie być wadą, o której nie myślę.

Answer 3

Można powiązać obiekt routera/użytkownika do <router-view>

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

Mam ten sam problem, więc chciałbym zobaczyć, co można wymyślić !!

Answer 4

Sposób, w jaki to zrobił, był przez dodanie dodatkowych informacji do np dziecko definicji Router:

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()} } 
]); 

w pierwszej trasie z tego przykładu, mijam w wiadomości tekstowej, dodając własne porperty „msg "do obiektu trasy. na drugiej trasie mijam niektóre programy obsługi zdarzeń, ale mogły to być niektóre obiekty niestandardowe lub inne.

W childmodel otrzymam te dodatkowe elementy w metodzie activate():

export class empty{ 
    message; 

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

Chyba w twoim przypadku, należy dodać obiekt użytkownika do definicji routera dziecko.

Answer 5

można zaimplementować metoda rodzajowa do przekazywania obiektów:

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); 
    } 

} 

następnie można użyć go programowo jak:

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

Wreszcie, można uzyskać param na stronie docelowej:

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