Aurelia 中未定义 RouterConfiguration 和 Router

Question

我对 Aurelia 很陌生，只是想将导航应用到我的项目中。尽管我导入 aurelia-router 仍然显示 RouterConfiguration 和 Router 在构造函数中未定义

import {Todo} from './ToDo/todo';
import {RouterConfiguration, Router} from 'aurelia-router';


export class App {
    heading = "Todos";
    todos: Todo[] = [];
    todoDescription = '';
    router :any;
    list: any[];

    constructor(RouterConfiguration: RouterConfiguration, Router: Router) {

        this.todos = [];
        this.configureRouter(RouterConfiguration, Router);
        //console.log("klist", this.list);
    }

    //config.map() adds route(s) to the router. Although only route, name, 
    //moduleId, href and nav are shown above there are other properties that can be included in a route.
    //The class name for each route is 
    configureRouter(config: RouterConfiguration, router: Router): void {
        this.router = router;
        config.title = 'Aurelia';
        config.map([
            { route: '', name: 'home', moduleId: 'home/home', nav: true, title: 'Home' },
            { route: 'users', name: 'users', moduleId: './Friends/Friends', nav: true },
            //{ route: 'users/:id/detail', name: 'userDetail', moduleId: 'users/detail' },
            //{ route: 'files/*path', name: 'files', moduleId: 'files/index', href: '#files', nav: 0 }
        ]);
    }

    addTodo() {
        if (this.todoDescription) {
            this.todos.push(new Todo(this.todoDescription));
           // this.todoDescription = '';
        }
    }

 }

Answer 1

按照惯例，Aurelia 在为 configureRouter() 函数加载 (App) 的初始类中查找并执行它。这意味着，您不必在构造函数中注入任何内容。

看起来你只是添加了太多。我认为修复你的样本似乎就像删除一些东西一样简单，就像这样：

import { Todo } from './ToDo/todo';
import { RouterConfiguration, Router } from 'aurelia-router';

export class App {
    heading = "Todos";
    todos: Todo[] = [];
    todoDescription = '';
    list: any[];

    constructor() {
      // note: removed routing here entirely (you don't need it)
      // also, you've already declared this.todos above, so no need to do it here again
    }

    configureRouter(config : RouterConfiguration, router : Router): void {
        this.router = router;
        config.title = 'Aurelia';
        config.map([
            { route: '', name: 'home', moduleId: 'home/home', nav: true, title: 'Home' },
            { route: 'users', name: 'users', moduleId: './Friends/Friends', nav: true }
        ]);
    }

    addTodo() {
      // removed this for brevity
    }

 }

这应该可以解决路由器和 RouteConfiguration 上的“未定义”错误。作为附加说明，不要忘记将<router-view> 也添加到您的html 模板中。否则，您不会收到任何错误，但视图也不会显示：

 <template>
    <div class="content">
      <router-view></router-view>
    </div>
 </template>

可以在Aurelia Docs - Routing 找到有关这方面的优秀文档。