import { NgModule } from "@angular/core"; import { RouterModule, Routes } from "@angular/router"; import { HomeComponent } from "./home/home.component"; import { LoginComponent } from "./login/login.component" const routes: Routes = [ { path: "", redirectTo: "/home", pathMatch: "full" }, { path: "home", component: HomeComponent }, { path: "login", component: LoginComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

接下来我们来应用这个路由，

打开app.module.ts，更新代码如下：

import { NgModule } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { HttpModule } from "@angular/http"; import { FormsModule } from "@angular/forms"; import { AppRoutingModule } from "./app-routing.module"; import { AuthService } from "./_services/auth.service"; import { AppComponent } from "./app.component"; import { HomeComponent } from "./home/home.component"; import { LoginComponent } from "./login/login.component"; @NgModule({ bootstrap: [AppComponent], imports: [ BrowserModule, HttpModule, AppRoutingModule, FormsModule ], declarations: [ AppComponent, HomeComponent, LoginComponent ], providers: [AuthService] }) export class AppModule { }

NgModule和BrowserModule你可以理解为基础模块，必加的。

HttpModule是做http请求用的。

FormsModule是做双向数据绑定用的，比如下面这样的，如果想把数据从view更新到component，就必须加这个。

AppRoutingModule即为我们刚才添加的路由文件。

AuthService是我们最早添加的service文件。

AppComponent是我们最初添加的那个app.component.ts里的那个component.

HomeComponent,LoginComponent同上。

最后我们再app.component.ts中添加路由锚点，

把template的值为 "<router-outlet></router-outlet>"

完整的代码应该是这样：

import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'my-app', template: "<router-outlet></router-outlet>", }) export class AppComponent { }

router-outlet是路由锚点的关键词。

至此，所有代码完成，F5调试吧。

完整的Angular2的入门教程，请参阅官方文档的《英雄指南》：中文传送门 | 英文传送门

关于本例完整的代码以及调试运行步骤，请访问：How to authorization Angular 2 app with asp.net core web api