Aurelia'daki yönlendirici bileşeninden çocuk bileşenlerine veri nasıl aktarılır?

Question

Aurelia'da bir çocuk yönlendiricisi olan UserProouter adlı bir bileşene sahip olduğumuzu ve UserProfile, UserImages ve KullanıcıArkadaşlar'ye yönlendirmeyi gerçekleştirdiğimizi söyleyelim.

UserRouter'ın kullanıcıdan API'den (canActivate'de) yüklenmesini ve ardından bu kullanıcı verilerini alt bileşenlere iletmesini istiyorum.

Veriler düzgün yükleniyor, hepsini nasıl okuyabilsin diye alt bileşenlere nasıl iletebilirim? Örneğin. <router-view>'a bir özellik yerleştirme.

bindingContext argümanını alt bileşenlerin bind() yönteminde denedim ancak bu çalışmadı.

Teşekkür

Answer 1

Ben sadece Parent.of (YourComponent) kullanarak ana yönlendirici bileşeninin bir örneğini enjekte etmek bağımlılık enjektörü anlatmak, bunun için bir çözüm çalıştı.

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

Ayrıca, Aurelia DI sistemi yolunda çalıştığı için Parent.of parçasını da gözden kaçırmış olabilirsiniz.

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

Sen abone olmak olayı dinlemek olabilir veri ve alt bileşenleriyle bir etkinlik dışarı yayınlamak için event aggregator kullanabilirsiniz. Bu, bunlar arasındaki bağlantıyı önlerdi. Ancak, düşünmüyorum bir dezavantajı olabilir.

Answer 3

Ben aynı sorunu var <router-view>

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

için yönlendirici/kullanıcı nesnesini bağlamak olabilir, bu yüzden birlikte gelip görmek isteriz !!

Answer 4

Bunu yapan yolu, çocuk yönlendirici tanım örneğin ek bilgiler ekleyerek oldu: Ben 'kendi porperty ekleyerek kısa mesajla geçmesi

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

bu örnekten ilk rotada msg 'rota nesnesine. ikinci rotada bazı olay işleyicilerinden geçiyorum, ancak bazı özel nesneler veya başka bir şey olabilirdi. childmodel olarak

Ben etkinleştirme() yönteminde bu ek unsurları alıyorsunuz: Ben senin durumunda tahmin

export class empty{ 
    message; 

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

, alt yönlendirici tanımına kullanıcı nesnesi eklersiniz.

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

} 

sonra programlı gibi kullanabilirsiniz:

Answer 5

nesneleri iletmek için genel bir yöntem uygulayabilirsiniz nihayet

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

, hedef sayfasındaki param alabilirsiniz:

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