假设我们在 Aurelia 中有一个名为 UserRouter 的组件，它是一个子路由器，负责处理到 UserProfile、UserImages 和 UserFriends 的路由。
我希望 UserRouter 从 API（在 canActivate 上）加载用户，然后将此用户数据传递给子组件。
加载数据很好，我如何将它传递给子组件以便他们都可以读取它？例如在<router-view> 上放置一个属性。
我已经在子组件的 bind() 方法上尝试了 bindingContext 参数，但这没有奏效。
谢谢
【问题讨论】：
标签： javascript aurelia
我这样做的方式是在子路由器定义中添加附加信息，例如：
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”添加到路由对象来传递一条文本消息。 在第二条路线中，我传入了一些事件处理程序，但可能是一些自定义对象或其他任何东西。
在子模型中，我在 activate() 方法中收到这些附加元素：
export class empty{
message;
activate(params, routeconfig){
this.message=routeconfig.msg || "";
}
}
我猜在您的情况下，您会将用户对象添加到子路由器定义中。
【讨论】：
您可以将路由器/用户对象绑定到<router-view>
<router-view router.bind="router"></router-view>
我有同样的问题，所以我很想看看你的想法！！
【讨论】：
您可以使用event aggregator 发布带有数据的事件，并且子组件可以订阅和侦听该事件。这将避免它们之间的耦合。但是，可能有一个我没有想到的缺点。
【讨论】：
我为此制定了一个解决方案，您只需告诉依赖注入器使用 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;
}
}
【讨论】：
UsersRouter 然后返回，您可能会得到旧路由器，而不是新路由器，因为UsersRouter 可能作为静态生命周期类被注入依赖项意味着第一个实例化的就是将在任何地方注入依赖的那个。
你可以实现一个通用的方法来传递对象：
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;
}
【讨论】：