Question

假设我们有两个显示类似数据的组件。

UnfilteredList - 在没有过滤的情况下调用API FilteredList - 使用参数调用API以过滤数据

UnfilteredList.html看起来很像FilteredList.html UnfilteredList.js看起来几乎与FilteredList.js相同

在我们的路线中，我们定义了两条路线。

            {name: 'UnfilteredList', route: routes.UnfilteredList, isDisabled: false},
            {name: 'FilteredList', route: routes.FilteredList, isDisabled: false},
// More routes here

那么有更好的方法来避免重复代码吗？

修改：更新

我发现如果你想为两条路线使用相同的moduleId，你可以。在模块内部，您必须执行导入并添加方法。

import {activationStrategy} from 'aurelia-router';

determineActivationStrategy()
{
    return activationStrategy.invokeLifecycle;
}

然后，您可以在activate方法中使用params和routeConfig参数。每条路线都需要一个唯一的名称，然后您可以将其键入以过滤数据。

async canActivate(params, routeConfig)
{
    try
    {
        this.name = routeConfig.name;
    }
    catch (error)
    {
        this.errorMessage = error;
    }
}

Answer 1

您可以通过多种方式对此进行构建，但我采用的方法是将list路由定义如下：

export class App {
    configureRouter(config, router) {
        this.router = router;
        config.title = 'Aurelia';
        config.map([
        { route: ['', 'home'], name: 'home', moduleId: 'index' },
        { route: 'list', name: 'list', moduleId: 'list',  nav: true },
        ]);
    }
}

这将启用http://localhost/list?category=a&country=Australia

之类的路线

在list.js视图模型文件中，您可以访问路径中指定的查询参数：

<强> things.js

import {bindable, inject} from 'aurelia-framework';
import {ThingApi} from '../../services/thing-api';

@inject(ThingApi)
export class List{

    constructor(thingApi){
        this.thingApi = thingApi;
    }

    activate(params, routeConfig) { 
        this.category = params.category;
        this.country = params.country;
        this.loadThings();
    }

    filter(){
        this.loadThings();
    }

    loadThings(){
        this.thigApi.getThings(this.category, this.country).then(things => {
            this.things = things;
        });
    }

}

<强> things.html

<template>
  <input name="category" value.bind="category"></input>
  <input name="country" value.bind="country"></input>
  <button click.delegate="filter()"></button>
  <hr/>
  <table>
    <tr repeat.for="thing of things">
       <td>${thing.category}</td>
       <td>${thing.country}</td>
    </tr>
  </table>
</template>

在Aurelia，做类似组件的最佳方法是什么？

1 个答案: