11

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

我希望 UserRouter 从 API（在 canActivate 上）加载用户，然后将此用户数据传递给子组件。

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

我已经在子组件的 bind() 方法上尝试了 bindingContext 参数，但这没有奏效。

谢谢

4

5 回答 5

6

我这样做的方式是向子路由器定义添加附加信息，例如：

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

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

于 2015-07-16T22:17:48.717 回答
3

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

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

我有同样的问题，所以我很想看看你想出了什么！！

于 2015-07-15T08:04:56.063 回答
2

您可以使用事件聚合器发布带有数据的事件，并且子组件可以订阅和侦听该事件。这将避免它们之间的耦合。但是，可能有一个我没有想到的缺点。

于 2015-06-10T18:36:22.557 回答
1

我为此制定了一个解决方案，您只需告诉依赖注入器使用 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;
  }
}
于 2015-05-26T20:46:45.837 回答
0

您可以实现一个通用方法来传递对象：

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;
 }
于 2016-07-12T03:34:27.903 回答