Angular路由參數傳遞

一、路由時傳遞參數的方式

1、在查詢參數中傳遞數據，如

//前台頁面
<a routerLink="/product" [queryParams]="{id:1}">商品詳情</a>
//后台頁面獲取參數
export class ProductComponent implements OnInit {
  private productId: number;
  constructor(private routeInfo: ActivatedRoute) { }
  ngOnInit() {
    this.productId = this.routeInfo.snapshot.queryParams['id'];
  }
}

相應的后台獲取是：ActivedRoute.queryParams[id]

2、在路由路徑中傳遞數據，

//前台頁面
<a [routerLink]="['product', 1]">商品詳情</a>
//后台頁面，先修改路由定義，app-routing.modules.ts中
const routes: Routes = [
  {path: 'product/:id', component: ProductComponent},
  {path: '**', component: HomeComponent},
];

this.productId = this.routeInfo.snapshot.params['id'];

在路由定義時，定義為

3、在路由配置中傳遞數據，

//前台頁面
<input type="button" value="商品詳情" (click)='toProductDetails()' >
//后台頁面
 toProductDetails() {
    this.router.navigate(['/product', 2]);
  }
this.routeInfo.params.subscribe((params: Params) => this.productId = params['id']);

 

二、后台接收路由參數方式

1、snapshot和subscribe兩種，區別在於在路由地址不變的情況下，若參數發送變化后者所接收的參數也會隨之變化，前者不變。

 

三、路由重定向

訪問一個特定的地址時，會將其重定向到另一個指定的地址

//在定義路由時 
 {path: '', redirectTo: '/home', pathMatch: 'full' },
 {path: 'home', component : HomeComponent},