Angular 学习（五）：Angular 路由（Route）_angular route

Angular 路由（Route）

我们可以将路由器理解成控制整个应用状态的视图对象， 每个应用都有一个路由器； 路由器的另一个作用是为每个视图分配唯一的 url， 可以利用这个 url 使应用之间跳转到某一个特定的视图状态。 单页应用其实就是一个视图状态的集合。

单页应用（SPA）

一个单页应用是主页面只加载一次， 不再重复刷新， 只是改变页面部分内容的应用。 Angular 应用就是单页应用， 在 Angular 中使用路由器来实现根据用户的操作来改变页面的内容而不重新加载页面。 单页应用可以理解为一个视图状态的集合。

路由对象

Routes 路由数组

路由器需要先配置才会有路由信息, 并用 RouterModule.forRoot 方法来配置路由器。 当浏览器的 URL 变化时， 路由器会查找对应的 Route（路由）， 并据此决定该显示哪个组件。
基础配置：

const appRoutes: Routes = [
  { path: 'common/a', component: AComponent },
  { path: 'common/b/:id', component: BComponent },
  { path: '**', component: NotFoundComponent}, // 定义通配符路由
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  ...
})
1
2
3
4
5
6
7
8
9
10
11

RouterOutlet 路由出口

RouterOutlet 是一个来自路由模块中的指令，它的用法类似于组件。 它扮演一个占位符的角色，用于在模板中标出一个位置，路由器将会把要显示在这个出口处的组件显示在这里。

 <h1>组件的内容显示在（router-outlet）下方</h1>
 <router-outlet></router-outlet>
1
2

Router 路由器

使用 Router 对象导航。

constructor(private router: Router) {}

toAComponent() {
    this.router.navigate(['/common/a']);
    // 或 this.router.navigateUrl('common/a');
}
1
2
3
4
5
6

RouterLink 路由器链接

路由链接 url 必须以 ‘/’ 开头。

<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/common/b', id]">B组件</a>
<router-outlet></router-outlet>
1
2
3

ActivatedRoute 激活的路由

当前激活的路由的路径和参数可以通过 ActivateRoute 的路由服务来获取。

• 常用属性：

  属性	说明
  url	路由路径的 Observable 对象，是一个由路由路径中的各个部分组成的字符串数组.
  data	一个 Observable，其中包含提供给路由的 data 对象。也包含由解析守卫（resolve guard）解析而来的值。
  paramMap	一个 Observable，其中包含一个由当前路由的必要参数和可选参数组成的 map 对象。用这个 map 可以获取来自同名参数的单一值或多重值。
  queryParamMap	一个 Observable，其中包含一个对所有路由都有效的查询参数组成的 map 对象。 用这个 map 可以获取来自查询参数的单一值或多重值。

在路由时传递数据

• 在查询参数中传递数据

/common/b?id=1&name=2 => ActivatedRoute.queryParamMap

• 在路由路径中传递数据

{path: /common/b/:id} => /commo/b/1 => ActivatedRoute.paramMap

• 在路由配置中传递数据

{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}) => {

    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

snapshot: 参数快照，是一个路由信息的静态快照，抓取自组件刚刚创建完毕之后，不会监听路由信息的变化。如果确定一个组件不会从自身路由到自身的话，可以使用参数快照。

subscribe: 参数订阅，相当于一个监听器，会监听路由信息的变化。

重定向路由

在用户访问一个特定的地址时，将其重定向到另一个指定的地址。
配置重定向路由：

// 当访问根路径时会重定向到 home 路径
const appRoutes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent}
];
1
2
3
4
5

子路由

子路由配置语法：

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>
1
2
3
4
5
6
7
8
9
10

当点击Xxx链接时，主插座会显示’/home’链接所对应的组件，而xxxlet插座会显示xxx对应的组件。

路由守卫（guard）

CanActivate/CanActiveChild：处理导航到某路由的情况

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

export class DemoGuard1 implements CanActivate {

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

1
2
3
4
5
6
7
8

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

如果不满足这个守卫的要求就不能离开该路由。

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

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

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

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

1
2
3
4
5
6
7
8

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

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],
  ...
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17