Angular11路由

Edited on 2022-07-04 In 前端 , Angular , AntD

前言

这个时候应该已经创建了一个项目并且了解基本的文件结构.

路由配置

添加路由依赖

如果创建 App 时,没有添加路由,可以

1	ng generate module app-routing --flat --module=app

`src/app/app-routing.module.ts`

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 = [
  /*重定向 prefix:只要以 path 开头,就会重定向*/
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  /*登录*/
  {path: "login", component: LoginComponent},
  /*home*/
  {path: "home", component: HomeComponent},
];

@NgModule({
  /*初始化路由器*/
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

router 属性说明

引入 `app-routing.module.ts` 组件

app.module.ts 文件中引入 AppRoutingModule。

import {AppRoutingModule} from './app-routing.module';

@NgModule({
  declarations: [/****/],
  imports: [
    AppRoutingModule
    /*****/
  ]
})

添加路由出口

AppComponent添加

1 2	<!-- src/app/app.component.html --> <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'},
];

子路由

子路由配置语法：

const appRoutes: Routes = [
  { 
    path: 'home', 
    component: HomeComponent,
    children: [
      { path: '', component: AComponent},
      { path: 'b', component: BComponent}
    ]
  },
];

辅助路由

辅助路由又兄弟路由，配置语法：

// 路由配置
{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：处理导航到某路由的情况

当用户不满足这个守卫的要求时就不能到达指定路由。

export class DemoGuard1 implements CanActivate {

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    ...
    return true;
  }
}

CanDeactivate：处理从当前路由离开的情况

// 泛型中 AComponent 代表要守卫的组件。
export class DemoGuard2 implements CanDeactivate<AComponent> {
 canDeactivate(component: AComponent): boolean {
   // 根据 component 的信息进行具体操作
   return true;
 }
}

Resolve：在路由激活之前获取路由数据

在进入路由时就可以立刻把数据呈现给用户。

@Injectable()
export class AResolve implements Resolve<any> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     const id = route.paramMap.get('id');
     // 可以根据路由中的信息进行相关操作
  }
}

最后，需要将路由守卫添加到路由配置中：

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	重定向匹配方式

`pathMatch`

one 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/

前言