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中找到有關此問題的出色文檔 。