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},