aurelia 中的 RouterConfiguration 和 Router 未定义

Question

我是 Aurelia 的新手，只是想将导航应用到我的 project.Though 我导入 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) 的初始 class 并执行它。这意味着，您不必在构造函数中注入任何东西。

看来你添加的太多了。我认为修复您的示例似乎就像删除一些东西一样简单，如下所示：

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 上的 'undefined' 错误。另外请注意，不要忘记将 <router-view> 也添加到您的 html 模板中。否则，您不会收到任何错误，但也不会显示视图：

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

可以在 Aurelia Docs - Routing 找到关于此的重要文档。

aurelia 中的 RouterConfiguration 和 Router 未定义

RouterConfiguration and Router undefined in aurelia

import

routing

aurelia

routeconfig