Wie können Daten von der Router-Komponente an Kinder-Komponenten in Aurelia übergeben werden?

Question

Nehmen wir an, wir haben eine Komponente in Aurelia mit dem Namen UserRouter, die ein Kind-Router ist und das Routing zu UserProfile, UserImages und UserFriends behandelt.

Ich möchte den UserRouter in den Benutzer von der API laden (auf canActivate) und dann diese Benutzerdaten an Unterkomponenten übergeben.

Das Laden in die Daten ist in Ordnung, wie übertrage ich es auf Unterkomponenten, so dass sie alle lesen können? z.B. Platzieren eines Attributs auf <router-view>.

Ich habe versucht, das BindingContext-Argument für die Bind() -Methode von Unterkomponenten, aber das hat nicht funktioniert.

Dank

Answer 1

arbeitete ich für diese eine Lösung aus, geben Sie einfach die Abhängigkeit Injektor sagen, eine Instanz der übergeordneten Router Komponente Parent.of (YourComponent) zu injizieren.

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

Sie können den Parent.of-Part auch wirklich verpassen, weil das Aurelia DI-System nach oben arbeitet.

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

Sie konnten die event aggregator verwenden, um ein Ereignis mit den Daten zu veröffentlichen und den Unterkomponenten zeichnen und für dieses Ereignis hören konnte. Dies würde eine Kopplung zwischen ihnen vermeiden. Allerdings könnte es einen Nachteil geben, an den ich nicht denke.

Answer 3

Sie können den Router/Benutzerobjekt binden an die <router-view>

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

ich das gleiche Problem haben, also würde ich gerne sehen, was Sie kommen mit !!

Answer 4

So wie ich das tat, war durch zusätzliche Informationen an den Router Definition zB Kinder hinzufügen:

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

in der ersten Route aus diesem Beispiel habe ich in einer SMS-Nachricht übergeben von meinem eigenen porperty Hinzufügen ‚msg 'zum Routenobjekt. in der zweiten Route, die ich in einigen Ereignishandlern übergebe, aber könnten einige benutzerdefinierte Objekte oder sonst etwas gewesen sein.

Im childmodel erhalte ich diese zusätzlichen Elemente in der activate() -Methode:

export class empty{ 
    message; 

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

ich in Ihrem Fall erraten, würden Sie das Benutzerobjekt zu dem Kind Router Definition hinzufügen.

Answer 5

Sie können eine generische Methode implementieren Objekte weitergeben müssen:

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

} 

dann können Sie es programmatisch wie verwenden: schließlich

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

, können Sie die param auf der Zielseite erhalten:

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