前言 这个时候应该已经创建了一个项目并且了解基本的文件结构.
路由配置 添加路由依赖 如果创建 App 时,没有添加路由,可以
1 ng generate module app-routing --flat --module=app
src/app/app-routing.module.ts1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 import {NgModule } from '@angular/core' ;import {RouterModule , Routes } from '@angular/router' ;import {LoginComponent } from "./login/login.component" ;import {HomeComponent } from "./pages/home/home.component" ;const routes : Routes = [ {path : '' , redirectTo : '/login' , pathMatch : 'full' }, {path : "login" , component : LoginComponent }, {path : "home" , component : HomeComponent }, ]; @NgModule ({ imports : [RouterModule .forRoot (routes)], exports : [RouterModule ] }) export class AppRoutingModule {}
router 属性说明
引入 app-routing.module.ts 组件 app.module.ts 文件中引入 AppRoutingModule。
1 2 3 4 5 6 7 8 9 import {AppRoutingModule } from './app-routing.module' ;@NgModule ({ declarations : [], imports : [ AppRoutingModule ] })
添加路由出口 AppComponent添加
1 2 <router-outlet > </router-outlet >
跳转：Router 路由器 1 this .router .navigate (['/home' ]);
跳转：RouterLink 路由器链接 1 <a [routerLink]="['/home']">主页</a>
重定向路由 在用户访问一个特定的地址时，将其重定向到另一个指定的地址。 配置重定向路由：
1 2 3 const appRoutes: Routes = [ {path: '', redirectTo: '/login', pathMatch: 'full'}, ];
子路由 子路由配置语法：
1 2 3 4 5 6 7 8 9 10 const appRoutes: Routes = [ { path: 'home', component: HomeComponent, children: [ { path: '', component: AComponent}, { path: 'b', component: BComponent} ] }, ];
辅助路由 辅助路由又兄弟路由，配置语法：
1 2 3 4 5 6 7 8 9 10 // 路由配置 {path: 'xxx', component: XxxComponent, outlet:'xxxlet'}, {path: 'yyy', component: XxxComponent, outlet:'yyylet'} // 使用 <router-outlet></router-outlet> <router-outlet name="xxxlet"></router-outlet> // 链接 <a [routerLink]="['/home',{outlets:{xxxlet: 'xxx'}}]">Xxx</a>
当点击Xxx链接时，主插座会显示’/home’链接所对应的组件，而xxxlet插座会显示xxx对应的组件。
路由守卫（guard） CanActivate/CanActiveChild：处理导航到某路由的情况 当用户不满足这个守卫的要求时就不能到达指定路由。
1 2 3 4 5 6 7 export class DemoGuard1 implements CanActivate { canActivate (route : ActivatedRouteSnapshot , state : RouterStateSnapshot ): boolean { ... return true ; } }
CanDeactivate：处理从当前路由离开的情况 1 2 3 4 5 6 7 export class DemoGuard2 implements CanDeactivate <AComponent > { canDeactivate (component : AComponent ): boolean { return true ; } }
Resolve：在路由激活之前获取路由数据 在进入路由时就可以立刻把数据呈现给用户。
1 2 3 4 5 6 7 @Injectable ()export class AResolve implements Resolve <any > { resolve (route: ActivatedRouteSnapshot, state: RouterStateSnapshot ) { const id = route.paramMap .get ('id' ); } }
最后，需要将路由守卫添加到路由配置中：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 const appRoutes : Routes = [ { path : 'common/a' , component : AComponent , canActivate : [DemoGurad1 ], canDeactivate : [DemoGuard2 ], resolve : {data : AResolve } }, { path : 'common/b/:id' , component : BComponent }, { path : '**' , component : NotFoundComponent }, ]; @NgModule ({ imports : [RouterModule .forRoot (routes)], exports : [RouterModule ], ... })
文档记录
建议查询官方文档,下面只是简单的记录Angular
router 属性
path
地址栏中的URL
component
组建
redirectTo
重定向地址
pathMatch
重定向匹配方式
pathMatchone of prefix or full
prefix:只要以 path 开头,就会重定向,比如 path:'test',则 /test/123会被重定向,但是 /test123/不会被重定向.full: path全部匹配重定向
路由参数 ActivatedRoute 激活的路由 当前激活的路由的路径和参数可以通过 ActivateRoute 的路由服务来获取。
常 用属性：
属性
说明
url
路由路径的 Observable 对象，是一个由路由路径中的各个部分组成的字符串数组.
data
一个 Observable，其中包含提供给路由的 data
对象。也包含由解析守卫（resolve guard）解析而来的值。
paramMap
一个 Observable，其中包含一个由当前路由的必要参数和可选参数组成的 map 对象。用这个 map
可以获取来自同名参数的单一值或多重值。
queryParamMap
一个 Observable，其中包含一个对所有路由都有效的查询参数组成的 map 对象。 用这个 map 可以获取来自查询参数的单一值或多重值。
1 /common/b?id=1&name=2 => ActivatedRoute.queryParamMap
在路由路径中传递数据
1 {path: /common/b/:id} => /commo/b/1 => ActivatedRoute.paramMap
在路由配置中传递数据
1 {path: /common/b, component: BComponent, data: {id:“1”, title: “b”}}
示例
constructor(
private activatedRoute: ActivatedRoute
) { }
ngOnInit() {
// 从参数中获取
this.activatedRoute.queryParamMap.subscribe(params => {
this.id = params.get('id');
});
// 或
// this.activated.snapshot.queryParamMap.get('id');
// 从路径中获取
this.activatedRoute.paramMap.subscribe(params => {
this.id = params.get('id');
});
this.activatedRoute.data.subscribe(({id,title}) => {
});
}
snapshot: 参数快照，是一个路由信息的静态快照，抓取自组件刚刚创建完毕之后，不会监听路由信息的变化。如果确定一个组件不会从自身路由到自身的话，可以使用参数快照。
subscribe: 参数订阅，相当于一个监听器，会监听路由信息的变化。
本文地址： https://github.com/maxzhao-it/blog/post/15608/