【WHAT】
在Angular中，路由的作用就是建立URL路径和组件（页面，因为页面就是由组件构成）之间的对应关系，根据不同的URL路径匹配出相应的组件并渲染。
【HOW】
1. 定义路由配置
2. 创建根路由模块
3. 添加路由插座
(以上是基本且必须的三个步骤)
【示例：(文件如下)】
1.在app.routes定义路由,主要设置有:
- 设置启动的第一个路由
- 定义要在根目录下启动所有子路由
export const AppRoutes=[
{
path: '',redirectTo: 'showmain',//项目启动的第一个路由为showmain
pathMatch: 'full'
},{
path: 'showmain',loadChildren: './showmain/showmain.module#ShowmainModule'
},{
path: 'login',loadChildren: './login/login.module#LoginModule'
}
]
2.创建根路由（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 {RouterModule} from '@angular/router'; //导入路由
import { AppComponent } from './app.component';
import {AppRoutes} from './app.routes';
@NgModule({
declarations: [
AppComponent
],imports: [
BrowserModule,FormsModule,HttpModule,RouterModule,//设置主要路由
RouterModule.forRoot(AppRoutes)
],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }
3.定义插座（在app.component.html）
<router-outlet></router-outlet>
4.定义子路由showmain.routes.ts
import { ShowmainComponent } from './showmain.component';
export const ShowmainRoutes= [
{
path: '',component: ShowmainComponent
}
]
5.设置子路由ShowmainRoutes
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {RouterModule} from '@angular/router';
import {ShowmainRoutes} from './showmain.routes';
import { ShowmainComponent } from './showmain.component';
@NgModule({
imports: [
CommonModule,//设置ShowmainRoutes为子路由
RouterModule.forChild(<any>ShowmainRoutes)
],declarations: [
ShowmainComponent
]
})
export class ShowmainModule { }
6.设置跳转的下一个子路由login
在showmain.component.ts文件中设置在doIn（）触发时跳转路由
import { Component,OnInit } from '@angular/core';
import { Router} from '@angular/router'; //导入router服务
@Component({
selector: 'app-showmain',templateUrl: './showmain.component.html',styleUrls: ['./showmain.component.css']
})
export class ShowmainComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
}
doIn(): void {
//跳转到login路由（绝对路径）
this.router.navigateByUrl("login")
}
}
（之所以第二个页面要设置跳转，而跳转到第一个子路由没用到该句，是因为在根路由下已设置了项目启动后跳转的第一个路由）
- 在showmain.component.html设置页面
<h1>欢迎加入大米时代！</h1>
<button (click)="doIn()">进入系统</button>
7.定义第二个子路由LoginRoutes
login.routes.ts
import { LoginComponent } from './login.component';
export const LoginRoutes= [
{
path: '',component: LoginComponent
}
]
8.设置LoginRoutes为子路由
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {RouterModule} from '@angular/router';
import{FormsModule}from '@angular/forms';
import { LoginRoutes } from './login.routes';
import { LoginComponent } from './login.component';
@NgModule({
imports: [
CommonModule,//必须导入FormsMoudule，因为此页面用到了数据双向绑定
FormsModule,//将LoginRoutes设置为子路由
RouterModule.forChild(<any>LoginRoutes)
],declarations: [
LoginComponent
]
})
export class LoginModule { }
9.设置第二个路由即页面的主要内容
login.component.ts文件
import { Component,OnInit } from '@angular/core';
@Component({
selector: 'app-login',templateUrl: './login.component.html',styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
public username:string;
public password:string;
doLogin() {
//必须写this
let username = this.username;
let password = this.password;
if (username == "1" && password == "1"){
alert("登录成功")
}
else{
alert("登录失败")
}
}
}
login.component.html文件
<div class="login">
<h1>前台登录</h1>
</div>
<div>
<label for="">用户名：</label>
<input name ="username" type="text" [(ngModel)]="username">
</div>
<div>
<label for="">密 码：</label>
<input name ="password" type="text" [(ngModel)]="password">
</div>
<button (click)="doLogin()">登录</button>
程序执行，访问文件的顺序依次是：
思路是这样的：
在app.module中设置了根路由AppRoutes，于是开始执行app.module中，而app.module设置了跳转的第一个子路由showmain，在此文件中有该路由，于是去设置的路径下去找ShowmainModule，于是执行到了showmain.module，去showmain.routes找该路由，该路由被渲染的组件为ShowmainComponent，于是又执行到了showmain.component文件中，而此文件中又设置了一个绝对路径下的路由login，于是又执行到app.routes下查找有无该路由，有则跳转到指定目录下的login.module文件下找LoginModule，在login.module定义了该路由LoginRoutes，于是去login.routes找到了该路由，该路由被渲染的组件为LoginComponent，于是去login.component文件中找到该组件，执行方法，结束！[之所以回去app.routes下查找路由,是根据它设置的找路径找的this.router.navigateByUrl("login")]
【扩展】
原文链接：https://www.f2er.com/angularjs/145589.html