路由传值 · Angular学习文档

## 一、链接导航传值 #### 1.传递一个参数 >[info] 配置路由文件 ``` { path:'parent/:id', //id为路由传递的参数 component:ParentComponent } ``` >[info] 传递参数 ``` <a [routerLink]="['/parent',1]" routerLinkActive="active">跳转到parent组件,并传递一个参数</a> ``` #### 2.传递多个参数 >[danger] 传递多个参数不需要配置路由文件 ``` <a [routerLink]="['/parent']" [queryParams]="{id:1,state:1}">跳转到parent组件,并传递多个参数</a> ``` ## 二、JS路由跳转传值 #### 1.传递一个参数 >[info] 配置路由文件 ``` { path:'parent/:id', //id为路由传递的参数 component:ParentComponent } ``` >[info] 传递参数 ``` import { Router } from '@angular/router'; constructor(router:Router) { } //js路由传值 navigate():void{ this.router.navigateByUrl('parent/1'); } ``` #### 2.传递多个参数 >[danger] 传递多个参数不需要配置路由文件 ``` import { Router } from '@angular/router'; constructor(router:Router) { } //js路由传值 navigate(): void{ this.router.navigate(['parent'],{ queryParams: {session_id:123,id:10 }, //传递的参数 fragment: 'anchor' /*锚点*/ }); } ``` ## 三、静态数据 >[info] 路由配置中的data属性用来保存诸如页面标题、面包屑以及其它静态数据等。 ``` const routes: Routes = [ { path: 'parent', //路由路径 component: ParentComponent, //组件 data:{ //静态数据 parent:'parent', child:'child' } } ]; ``` ## 四、接收路由传值 #### 1.接收一个参数 ``` import { ActivatedRoute} from '@angular/router'; //ActivatedRoute：当前激活的路由对象，保存着当前路由的信息，如路由地址、路由参数等等。 constructor(router:ActivatedRoute) { } //接受传递过来的一个参数 ngOnInit() { this.router.params.subscribe(params=>{ console.log(params) }) } ``` #### 2.接收多个参数 ``` import { ActivatedRoute} from '@angular/router'; //ActivatedRoute：当前激活的路由对象，保存着当前路由的信息，如路由地址、路由参数等等。 constructor(router:ActivatedRoute) { } //接受传递过来的多个参数 ngOnInit() { this.router.queryParams.subscribe((params) => { console.log(params) }) } ``` #### 3.接收静态数据 ``` import { ActivatedRoute} from '@angular/router'; //ActivatedRoute：当前激活的路由对象，保存着当前路由的信息，如路由地址、路由参数等等。 constructor(router:ActivatedRoute) { } //接受传递过来的静态数据 ngOnInit() { this.router.data.subscribe(data => { console.log(data) }) } ``` ## 五、使用路由快照获取参数(snapshot) ``` import { ActivatedRoute} from '@angular/router'; //ActivatedRoute：当前激活的路由对象，保存着当前路由的信息，如路由地址、路由参数等等。 constructor(router:ActivatedRoute) { } //使用路由快照获取参数 //路由快照提供了路由参数的初始值。可以通过它来直接访问参数，而不用订阅或者添加 Observable 的操作符 ngOnInit() { //获取一个参数 this.route.snapshot.paramMap.get('id'); //获取多个参数 this.route.snapshot.queryParamMap.get('id'); } ``` ## 六、使用可观察对象接收路由参数 ``` import { Router, ActivatedRoute, ParamMap } from '@angular/router'; //ActivatedRoute：当前激活的路由对象，保存着当前路由的信息，如路由地址、路由参数等等。 import { switchMap } from 'rxjs/operators'; constructor( private route: ActivatedRoute, private router: Router, private service: HeroService ) {} //使用Observable对象接收路由参数 //在路由组件复用中,当路由参数改变时可通过Observable对象订阅到改变的值并做出响应 ngOnInit() { this.id = this.route.paramMap.pipe( switchMap((params: ParamMap) => console.log(params.get('id')) ); } ``` >[info] ParamMap API是参照URLSearchParams接口来设计的。它提供了一些方法来处理对路由参数paramMap和查询参数queryParamMap中的参数访问。