【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")
]
【扩展】
- declarations:声明自己写的东西(如组件)
- imports:通常是导入程序已封装号的东西(如router的forRoot()方法)
快捷键
- 新建文件(指定目录下):
ng g c 文件名
- 新建module:
ng g module 名称
- 启动服务的同时在浏览器中打开:
ng serve --open
- 该运行的端口:
ng serve --port 端口号
- 标签:
直接打标签名+双击Tab(不用输<)
- 新建文件(指定目录下):
有数值双向绑定时,无论html中用没用到表单,都要导入forms:
import { FormsModule } from '@angular/forms';