一、学单词:angular路由中涉及到很多新单词词汇
单词 |
说明 |
使用场景 |
Routes |
配置路由,保存URL对应的组件,以及在哪个RouterOutlet中展现 |
|
RouterOutlet |
在html中标记挂载路由的占位容器 |
|
Router |
在ts文件中负责跳转路由操作 |
Router.navigate([“/xxx”]),Router.navigateByUrl(“/xxx”) |
routerLink |
在html中使用页面跳转 |
<a [routerLink]="['/xx']" |
routerLinkActive |
表示当前激活路由的样式 |
routerLinkActive=”active” |
ActivedRoute |
获取当前激活路由的参数, |
这个是一个类,要实例化,使用实例化后的对象.params,xx.queryParams |
redirectTo |
重定向 |
redirectTo=”/路径” |
useHash |
使用哈希值展现 |
{useHash:true} |
pathMatch |
完全匹配 |
pathMatch:”full” |
二、实现一个简单的路由
三、一个简单的路由案例代码,使用了redirectTo
做重定向
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {Page1Component} from "app/page1/page1.component";
import {Page2Component} from "app/page2/page2.component";
const routes : Routes = [
{path: '',redirectTo:"/page1",pathMatch:"full"},
{path: 'page1',component:Page1Component},
{path: 'page2',component:Page2Component},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
export class AppRoutingModule { }
<div class="container" style="margin-top:50px;">
<div class="row">
<div class="col-md-2">
<ul class="list-group">
<li class="list-group-item"><a [routerLink]="['/page1']">列表一</a></li>
<li class="list-group-item"><a [routerLink]="['/page2']">列表二</a></li>
</ul>
</div>
<div class="col-md-10" style="border:1px solid #ddd;padding-bottom:50px;padding-top:50px;">
<router-outlet></router-outlet>
</div>
</div>
</div>
四、添加404页面
如果用户输入的url
地址不正确,或者输入的地址不存在跳转到指定的路径,使用”**”去匹配,路由会先从上面匹配,如果匹配不成功就会往下匹配
const routes : Routes = [
{path: '',redirectTo:"/page1",pathMatch:"full"},
{path: 'page1',component:Page1Component},
{path: 'page2',component:Page2Component},
{path: '**',component:Page404Component},
];
五、在TS
文件中通过事件绑定跳转页面实现切换路由
在ts文件中实现路由的跳转有两种方式:本人建议用第一种,跟html页面中保持一致
- 1、
navigate
里面穿的一个数组
- 2、
navigateByUrl
里面传递一个字符串
import { Component, OnInit } from '@angular/core';
import {Router} from "@angular/router";
@Component({
selector: 'app-page404',
templateUrl: './page404.component.html',
styleUrls: ['./page404.component.css']
})
export class Page404Component implements OnInit {
constructor(private router:Router) { }
ngOnInit() {
}
topage1(){
this.router.navigate(["/page1"]);
}
topage2(){
this.router.navigateByUrl("/page2");
}
}
六、实现选择当前路由高亮显示
-
1、在html
页面中添加routerLinkActive
=”样式名称”
<ul class="list-group">
<li class="list-group-item"><a [routerLink]="['/page1']" routerLinkActive="active">列表一</a></li>
<li class="list-group-item"><a [routerLink]="['/page2']" routerLinkActive="active">列表二</a></li>
</ul>
- 2、在样式表中定义
active
样式
七、路由实现两个组件之间切换传递参数,主要有两种方式
- 1、
path
方法传递参数
-
2、query
方法传递参数
7.1 通过path
方式传递参数
{path: 'page2/:id1/:id2',component:Page2Component},
<li class="list-group-item"><a [routerLink]="['/page2',1,2]" routerLinkActive="active">列表二</a></li>
-
3、修改Page2Component
的ts文件
import {Component, OnInit, OnDestroy} from '@angular/core';
import {ActivatedRoute} from "@angular/router";
export class Page2Component implements OnInit,OnDestroy {
private id1 : number;
private id2 : number;
private sub:any;
constructor(private _activatedRoute:ActivatedRoute) { }
ngOnInit() {
this.sub = this._activatedRoute.params.subscribe(params=>{
console.log(`parames参数:${params}`)
this.id1 = params["id1"];
this.id2 = params["id2"];
console.log(`获取的参数id1:${this.id1},id2:${this.id2}`)
})
}
//组件卸载的时候取消订阅
ngOnDestroy() : void {
this.sub.unsubscribe();
}
}
7.2 通过navigate
传递path
参数
this.router.navigate(["/page1",参数1,参数2]);
//或者是这样
this.router.navigateByUrl("/page2/参数1/参数2");
7.3通过query
传递参数
-
1、修改html
页面添加传递参数
<li class="list-group-item"><a [routerLink]="['/page1']" [queryParams]="{id:1,name:'hello',age:20}" routerLinkActive="active">列表一</a></li>
-
2、修改ts
代码使用queryParams
获取传递参数
import {Component, OnInit, OnDestroy} from '@angular/core';
import {ActivatedRoute} from "@angular/router";
@Component({
selector: 'app-page1',
templateUrl: './page1.component.html',
styleUrls: ['./page1.component.css']
})
export class Page1Component implements OnInit,OnDestroy {
private sub:any;
private id:number;
private name:string;
private age:number;
constructor(private _activatedRoute:ActivatedRoute) { }
ngOnInit() {
this.sub = this._activatedRoute.queryParams.subscribe(queryParams=>{
console.log("queryParams参数:",queryParams);
this.id = Number.parseInt(queryParams["id"]);
this.name = queryParams["name"];
this.age = Number.parseInt(queryParams["age"]);
})
}
ngOnDestroy(){
this.sub.unsubscribe();
}
}
-
3、通过navigate
传递query
参数
this.router.navigate(["/page1"],{queryParams:{"id":"10","name":"word","age":"30"}});
- 4、通过
navigateByUrl
传递query
参数
javascript
this.router.navigateByUrl("/page1?name=hello&id=2&age=20");
八、配置子路由
-
1、修改路由文件
const routes : Routes = [
{path: '',redirectTo:"/page1",pathMatch:"full"},
{path: 'page1',component:Page1Component},
{path: 'page2/:id1/:id2',component:Page2Component},
{path: 'page3',component:Page3Component,children:[
{path:"",redirectTo:"page31",pathMatch:"full"},
{path:"page31",component:Page31Component},
{path:"page32",component:Page32Component},
]},
{path: '**',component:Page404Component},
];
-
2、在page3
的html
页面修改
<button class="btn btn-danger" [routerLink]="['./page31']">page31</button>
<button class="btn btn-danger" [routerLink]="['./page32']">page32</button>
<router-outlet></router-outlet>
九、辅助路由(兄弟路由)就是一个页面中使用多个路由插座<router-outlet></<router-outlet>
使用方式:
- 1、在
<router-outlet name="xxx"></<router-outlet>
定义别名
- 2、在路由文件中增加一个
outlet
的属性,如:{path: 'page1',component:Page1Component,outlet="xxx"}