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＆＃39; msg＆＃39;传递了一条短信。到路线对象。在第二条路线中，我传递了一些事件处理程序，但可能是一些自定义对象或其他东西。

在childmodel中，我在activate（）方法中接收了这些附加元素：

export class empty{
  message;

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

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

Answer 2

您可以将路由器/用户对象绑定到<router-view>

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

我有同样的问题，所以我很乐意看到你提出的问题!!

Answer 3

您可以使用event aggregator发布带有数据的事件，子组件可以订阅并监听该事件。这样可以避免它们之间的耦合。但是，我可能没有想到的缺点。

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

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

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

5 个答案: