路由不在Angular2中工作

时间:2016-03-23 18:51:32

标签: javascript angularjs routing angular angularjs-routing

我的路由器在Angular2中没有工作,为了证明这一点,我已将相同的组件作为我的站点根目录和/login的目标。该组件在http://localhost:3000工作,但在http://localhost:3000/login,我只是收到通知"无法获取/登录"。

app.component.ts:

import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';

import {TodoService} from './todo/services/todo.service';
import { TodoCmp } from './todo/components/todo.component';
import { LoginComponent } from './user/components/login.component';
import { UserService } from './user/services/user.service';


@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['client/dev/todo/styles/todo.css'],
  directives: [ROUTER_DIRECTIVES],
  providers: [
    ROUTER_PROVIDERS,
    TodoService
  ]
})
@RouteConfig([
  {
    path: '/',
    name: 'TodoCmp',
    component: TodoCmp,
    useAsDefault: true
  },
  {
    path: '/login',
    name: 'TodoCmp',
    component: TodoCmp
  }
])

export class AppComponent {
  title = 'ng2do';
}

以下是我的index文件的链接。 我做错了什么?

1 个答案:

答案 0 :(得分:0)

一个@RouteConfig(...)中的两个路由不能具有相同的名称:

@RouteConfig([
  {
    path: '/',
    name: 'TodoCmp',
    component: TodoCmp,
    useAsDefault: true
  },
  {
    path: '/login',
    name: 'TodoCmp',  <!-- <<<== should be 'Login' instead of 'TodoCmp'
    component: TodoCmp
  }
])

您应该将ROUTER_PROVIDERS移至bootstrap()(例如HTTP_PROVIDERS