路由在 Angular2 中不起作用 [英] Routing not working in Angular2

问题描述

我的路由在 Angular2 中不起作用，为了证明这一点，我将相同的组件作为我网站根目录和 /login 的目标.该组件在 http://localhost:3000 上工作，但在 http://localhost:3000/login 上，我只收到一条通知无法获取/login".

My Routing isn't working in Angular2, to demonstrate the point, I have put the same component as the destination for both the root of my site and /login. The component works at http://localhost:3000, but at http://localhost:3000/login, I just get a notice "Cannot GET /login".

app.component.ts:

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';
}

这是我的索引的链接 文件.我做错了什么?

Here is a link to my index file. What have I done wrong?

推荐答案

两个路由合二为一 @RouteConfig(...) 不能同名:

Two routes in one @RouteConfig(...) can't have the same name:

@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)

You should move ROUTER_PROVIDERS to bootstrap() (like HTTP_PROVIDERS)

这篇关于路由在 Angular2 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！