angular路由傳參

• 在路由時傳遞資料

/product?id=1&name=2 '資料的接收' '在路由的目標元件中，可以通過以下方式獲得資料'

 ActivatedRoute.queryParams[id] AcitvatedRoute.queryParams[name]

• 在路由的路徑中傳遞資料

'定義路由路徑時，指定引數的名字'
 {path:/product/:id} 
'在實際的路徑中攜帶這個引數'
 /product/1 
'在路由的目標元件中使用以下方式拿到引數'
 ActivatedRoute.params[id]

 

• 在路由的配置中傳遞資料

'以下內容是路由的配置' 
{path:/product,component:ProductComponent,data:[{isProd;true}]} 
'在路由的目標元件中，通過以下語法拿到資料' 
ActivatedRoute.data[0][isProd]

 

例項

• 在查詢引數中傳遞資料

• 在去目標路由元件中獲得這個資料

export class ProductComponent implements OnInit { 
    '定義接收資料的變數' 
    private productId: number;
     '在建構函式中引入這個型別'
     constructor(private routeInfo: ActivatedRoute) { }
     ngOnInit() { '接收傳遞過來的引數' this.productId = this.routeInfo.snapshot.queryParams["id"]; } }

 

• 在URL中傳遞引數

 

1. 修改路由配置中的地址

const routes: Routes = [
 { 
    path: '', component: HomeComponent }, 
    '地址攜帶引數'
     {path: 'product/:id', component: ProductComponent}
 ];

2、給引數賦值

<a [routerLink]="['/']">主頁</a> 
'product後面的1即為引數id對應的值' 
<a [routerLink]="['/product',1]" >商品詳情</a>

3、讀取引數的值

export class ProductComponent implements OnInit {
 '定義接收資料的變數' 
  private productId: number; 
  '在建構函式中引入這個型別' 
  constructor(private routeInfo: ActivatedRoute) { 
} 
  ngOnInit() { 
 '接收傳遞過來的引數'
  this.productId = this.routeInfo.snapshot.params["id"]; 
 } 
}