您如何在Aurelia中动态绑定路由-HREF参数

Question

我正在使用PushState，而不是使用Hashes进行URL结构。

我有一条路线，并且具有一些参数绑定 - 一些可选的：

route: [                        
     'chart/:chartType/:id',
     'chart/:chartType/:id/:view?',
     'chart/:chartType/:id/page/:page?',
     'chart/:chartType/:id/:view?/page/:page?'
], 

，然后我有了路线，那里有必要的绑定：

route-href="route.bind: chart; params.bind: { id: chartId, chartType: type, view: viewType, page: pageNum }"

...但是，如果我不总是想要route-href的所有路由参数怎么办？就像在那样，我希望能够链接到使用ChartType和ID的路由，而无需为我在此路线上拥有的每个参数组合创建单独的路由。

我知道我可以使用"？"在路由器配置中以指定路线可选，但是如何在路线链路中使参数可选？

这样做类似的事情会引发错误：

route-href="route.bind: chart; params.bind: { id: chartId, chartType: type, view?: viewType, page?: pageNum }"

我似乎无法使用.bind语法，例如（也错误）：

route-href="route.bind: chart; params.bind: { id: chartId, chartType: type, view.bind: hasViewParam, page.bind: hasPageParam }"

这里有什么魔术语法？

Answer 1

问题是，虽然Aurelia可以观察原语，对象和数组，但它无法观察到对象或数组元素的属性。

<a route-href="route.bind: chart; params.bind: { id: chartId, chartType: type, view: viewType, page: pageNum }">link</a>

这将起作用，但在更新chartId，type，viewType和pageNum时不会更新。传递给绑定的值是{ID，ChartType视图，页面}对象，而Aurelia无法观察此对象的属性。因此，最好的办法是生成一个对象。

也许在您的视图模型中：

export class ViewModel {
  chartId;
  type;
  viewType;
  pageNum;
}

对此进行增强：

import { observable } from 'aurelia-framework';
export class ViewModel {
  @observable({ changeHandler: 'generateLinkParams'}) chartId;
  @observable({ changeHandler: 'generateLinkParams'}) type;
  @observable({ changeHandler: 'generateLinkParams'}) viewType;
  @observable({ changeHandler: 'generateLinkParams'}) pageNum;
  linkParams;
  generateLinkParams() {
    const { chartId, type, viewType, pageNum } = this;
    this.linkParams = { chartId, type, viewType, pageNum };
  }
}

现在，由于正在更新LinkParams对象的值，而不仅仅是其属性，Aurelia会观察到它。这导致了解决方案Fabio给出的：

<a route-href="route.bind: chart; params.bind: linkParams">link</a>

Answer 2

尝试创建chartParams属性。每当您更改chart时更新此属性。然后，您可以执行此route-href="route.bind: chart; params.bind: chartParams。（我没有测试过这种方法，但我认为它会起作用）

另一个选项是手动生成路由。例如：

this.myRoute = this.router.generate(routeName, params);

然后，您可以将其绑定到链接标签：

<a href.bind="myRoute">My Route</a>