Как передавать данные из компонента маршрутизатора в дочерние компоненты в Aurelia?

Допустим, у нас есть компонент в Aurelia с именем UserRouter, который является дочерним маршрутизатором и обрабатывает маршрутизацию в UserProfile, UserImages и UserFriends.

Я хочу, чтобы UserRouter загружался пользователем из API (on canActivate), а затем передавал эти данные пользователю субкомпонентам.

Загрузка в данных в порядке, как мне передать ее на субкомпоненты, чтобы они все могли ее прочитать? например, размещение атрибута в <router-view>.

Я пробовал аргумент bindingContext в методе bind() подкомпонентов, но это не сработало.

благодаря

Ответ 1

То, как я это делал, заключалось в добавлении дополнительной информации к определению дочернего маршрутизатора, например:

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

в первом маршруте из этого примера я передаю текстовое сообщение, добавив свою собственную порцию "msg" в объект маршрута. во втором маршруте я передаю некоторые обработчики событий, но могли бы быть некоторые пользовательские объекты или что-то еще.

В childmodel я получаю эти дополнительные элементы в методе activate():

export class empty{
  message;

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

Думаю, в вашем случае вы добавили бы пользовательский объект к определению дочернего маршрутизатора.

Ответ 2

Вы можете привязать объект маршрутизатора/пользователя к <router-view>

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

У меня такая же проблема, поэтому я хотел бы посмотреть, что вы придумали !!

Ответ 3

Вы можете использовать агрегатор событий для публикации события с данными, а субкомпоненты могут подписаться и прослушать это событие. Это позволит избежать связи между ними. Тем не менее, может быть недостаток, о котором я не думаю.

Ответ 4

Я разработал решение для этого, просто сообщите инжектору зависимости, чтобы ввести экземпляр родительского компонента маршрутизатора с помощью 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;
  }
}

Вы также можете пропустить часть Parent.of, потому что система Aurelia DI работает.

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

Ответ 5

Вы можете реализовать общий метод передачи объектов:

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

}

то вы можете использовать его программно, как:

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

наконец, вы можете получить параметр на целевой странице:

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