## 一、鏈接導航傳值 #### 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中的參數訪問。