RouterConfiguration和Router在Aurelia中未定义

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-view>添加到HTML模板中。否则，您将不会遇到任何错误，但视图也不会显示：

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

可以在Aurelia文档 - 路由上找到有关此的大量文档。