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在加载（App）的初始类中查找configureRouter（）函数并执行它。 这意味着，您不必在构造函数中注入任何内容。

看来您只是添加了太多。 我认为修复样本似乎就像删除一些内容一样容易，例如：

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
    }

 }

这样可以解决您在Router和RouteConfiguration上的“未定义”错误。 另外，请不要忘记将<router-view>到您的html模板中。 否则，您将没有任何错误，但是视图也不会显示：

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

可以在Aurelia Docs-Routing中找到有关此问题的出色文档 。