如何将数据从路由器组件传递到Aurelia中的子组件？

Question

假设我们在Aurelia中有一个名为UserRouter的组件,它是一个子路由器,处理到UserProfile,UserImages和UserFriends的路由.

我希望UserRouter从API(在canActivate上)加载用户,然后将此用户数据传递给子组件.

加载数据很好,我如何将其传递给子组件,以便他们都可以读取它？例如放置属性<router-view>.

我已经在子组件的bind()方法上尝试了bindingContext参数,但这没有用.

谢谢

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

在这个例子的第一个路径中,我通过将自己的porperty'msg'添加到路由对象来传递文本消息.在第二个路径中,我传递了一些事件处理程序,但可能是一些自定义对象或其他东西.

在childmodel中,我在activate()方法中接收了这些附加元素:

export class empty{
  message;

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

我想在你的情况下,你会将用户对象添加到子路由器定义.

Answer 2

我为此制定了一个解决方案，您只需告诉依赖注入器使用 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;
  }
}