router 路由的应用

在使用 npm install -g @angular/cli 脚手架进行项目创建之后,需要用到router

首先是在app文件夹下创建app-routing.module.ts文件。

引入一些关键的模块

1
2
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

创建一些component的路由配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const routes: Routes = [
{
path: '',
redirectTo: '',
pathMatch: 'full'
},
{
path: '',
component: LoginComponent
},
{
path: 'home',
component: HomeComponent
}
];

最后肯定是要定义出口 AppRoutingModule 以及 module的依赖

1
2
3
4
5
6
7
8
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [RouterModule]
})

export class AppRoutingModule {}

同时在app.module.ts中也是需要引入AppRoutingModule模块的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { AppRoutingModule } from './app-routing.nodule';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './home/login/login.component';
import { LayoutComponent } from './layout/layout.component';

@NgModule({
declarations: [
AppComponent,
HomeComponent,
LoginComponent,
LayoutComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

这样就能使用路由进行跳转了