Angular2 路由入门学习

模块是基础，接下来看一下路由，路由就是整个项目的一根线，串联着各个项目的各个模块。

还是用例子来记录，看图说话。

先准备几个组件

创建项目

ng new routestest

创建组件

ng g c one-component

ng g c two-component

ng g c page-not-found-component

创建对应的module的routes模块

ng g m app-routes

app-routes.module.ts文件

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule, Routes } from '@angular/router'; import { OneComponentComponent } from './one-component/one-component.component'; import { TwoComponentComponent } from './two-component/two-component.component'; import { PageNotFoundComponentComponent } from './page-not-found-component/page-not-found-component.component'; export const appRoutes = [ { path: '', redirectTo: 'one', pathMatch: 'full' }, { path: 'one', component: OneComponentComponent }, { path: 'two', component: TwoComponentComponent }, { path: '**', //fallback router must in the last component: PageNotFoundComponentComponent } ]; @NgModule({ declarations: [ OneComponentComponent, TwoComponentComponent, PageNotFoundComponentComponent ], imports: [ RouterModule.forRoot(appRoutes) ], exports: [ RouterModule ] }) export class AppRoutesModule { }

app.module.ts文件

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppRoutesModule } from './app-routes.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule, AppRoutesModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

app.component.html文件

<h1>

  {{title}}

</h1>

<nav>

  <a routerLink='one'>one</a>

  <a routerLink='two'>two</a>

  <a routerLink='three'>three</a>

</nav>

<router-outlet></router-outlet>

这里就完成了路由的配置

转载于:https://www.cnblogs.com/bh4lm/p/6639133.html

相关资源：Angular 4.x 路由快速入门学习