【Angular】10路由

1、路由概念

路由就是连接组件的筋络，是树形结构。把路由看成是一组规则，它决定了url的变化对应着哪一种状态，具体表现就是不同视图的切换。
在angular中，路由是非常重要的组成部分，组件的实例化与销毁，模块的加载，组件的某些生命周期钩子的发起,都是与它有关。
路由器是一个调度中心，它是一套规则的列表，能够查询当前URL对应的规则，并呈现出相应的视图。
路由是列表里面的一个规则，即路由定义，它有很多功能字段:

• path字段,表示该路由中的URL路径部分
• Component字段,表示与该路由相关联的组件

2、路由使用

每个带路由的Angular应用都有一个路由器服务的单例对象，通过路由定义的列表进行配置后使用。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { STDetailComponent } from './stdetail/stdetail.component';
import { STListComponent } from './stlist/stlist.component';

const routes: Routes = [
  {
    path:'list',
    component:STListComponent
  },
  {
    path:'detail/:id',
    component:STDetailComponent
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//路由导航 
<a [routerLink]="['/home']" routerLinkActive="router-link-active">首页</a>
<a [routerLink]="['/list']" routerLinkActive="router-link-active" >列表</a>
<a [routerLink]="['/detail', '123']" routerLinkActive="router-link-active" >详情</a>

//组件渲染输出
<router-outlet></router-outlet>
1
2
3
4
5
6
7

上述流程可描述为：

• 当地址栏URL变化时路径部分/home满足列表中path为"home"的路由定义，激活对应STHomeComponent的实例，显示它的视图
• 当应用程序请求导航到路径/list时，符合了另外的规则,激活对应视图且展示内容，并将该路径更新到浏览器地址栏和历史

3、路由嵌套

父子路由嵌套配置：

  {
    path:'home',
    component: STHomeComponent,
    children: [
      {
        path:'user',
        component: STUserHomeComponent,
      },
      {
        path:'order',
        component: STOrderHomeComponent,
      },
    ]
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

​在STHomeComponent内这是router-outlet路由出口，即可在home 路由内渲染子级路由

//home template
<a [routerLink]="['/home/user']" routerLinkActive="router-link-active">用户</a>
<a [routerLink]="['/home/order']" routerLinkActive="router-link-active" >订单</a>
<!-- 路由组件渲染的位置 -->
<router-outlet></router-outlet>
1
2
3
4
5

​在非STHomeComponent内跳转到/home/user路由需要写全路径

//app template
<a [routerLink]="['/home/user']" routerLinkActive="router-link-active">用户</a>
<a [routerLink]="['/home/order']" routerLinkActive="router-link-active" >订单</a>
<!-- 路由组件渲染的位置 -->
<router-outlet></router-outlet>
1
2
3
4
5

4、路由传参

• query：在a标签上添加一个参数queryParams，并通过this.routerinfo.snapshot.queryParams获取参数

<a [routerLink]="['/detail/999']" [queryParams]="{name:'tom'}">详情-queryParams</a>
1

import { ActivatedRoute } from '@angular/router';
constructor(private routerInfo:ActivatedRoute) { }

ngOnInit(): void {
  let queryParams = this.routerInfo.snapshot.queryParams
  console.log(queryParams)
  console.log(queryParams['name']);
}
1
2
3
4
5
6
7
8

• params：修改路由配置文件path，路由导航a标签routerLink后面数组的第二个参数为传递的值，并且通过subscribe请阅的方式获取id参数

 {
    path:'detail/:id',
    component:STDetailComponent
  },
1
2
3
4

<a [routerLink]="['/detail/999']" [queryParams]="{name:'tom'}" routerLinkActive="router-link-active" >详情-queryParams</a>
1

ngOnInit(): void {
import { ActivatedRoute, Params} from '@angular/router';
id: string = ''
constructor(private routerInfo:ActivatedRoute) { }
  this.routerInfo.params.subscribe((params: Params)=>{
    this.id = params['id']
  })
}
1
2
3
4
5
6
7
8