Question

假设我有以下两个使用相同模块./foo.html的路由配置：

export class App {
  configureRouter(config, router) {
    config.map([
      {route: 'foo1', name: 'foo1', moduleId: './foo.html', nav: true, title: 'Foo1'},
      {route: 'foo2', name: 'foo2', moduleId: './foo.html', nav: true, title: 'Foo2'}
    ]);
  }
}

我有foo.html自定义元素：

<template bindable="grade">
  ${grade}
</template>

然后，如何将{grade: 'A'}模型绑定到foo1路由并将{grade: 'B'}模型绑定到foo2路由？

我期待有类似model属性的东西，我可以将我的模型绑定到每条路线，如下所示：

{route: 'foo1', name: 'foo1', moduleId: './foo.html', model:{grade: 'A'}, nav: true, title: 'Foo1'},
 {route: 'foo2', name: 'foo2', moduleId: './foo.html', model:{grade: 'B'}, nav: true, title: 'Foo2'}

但这不起作用。

注意，我不想通过路由配置的settings属性传递任何数据，因为我将失去bindable技术带来的一些优势。例如，上面的foo html组件可以作为html视图中的元素重用：

<div>
  blah blah
  <foo grade.bind="'C'"></foo>
</div>

Answer 1

您可以在路线中添加路线参数，例如：

config.map([
    {route: 'foo/:grade', name: 'foo', moduleId: './foo', nav: true, title: 'Foo'}
]);

然后使用以下方法访问它：

import { autoinject } from "aurelia-dependency-injection";
import { Router } from "aurelia-routing";

@autoinject()
export Foo {
  grade: string;

  constructor(private router: Router) {}

  attached () {
    this.grade = this.router.currentInstruction.params.grade;
  }
}

如何在路由器配置中将模型数据绑定到Aurelia路由

1 个答案: