路由時(shí)傳遞數(shù)據(jù)的方式：

1. 在查詢參數(shù)中傳遞

//傳遞數(shù)據(jù)
...
<a [routerLink]="['/stock']" [queryParams]="{id: 1}">股票詳情</a>
// http://localhost:4200/stock?id=1



//接受參數(shù)
...
import { ActivatedRoute } from '@amgular/router';

export class StockComponent implements OnInit {

    private stockId: number;    
    
    constructor(private routeInfo: ActivatedRoute)
    
    ngOnInit() {
        this.stockId = this.routeInfo.snapshot.queryParams['id'];
    }
    
}

2. 在路由路徑中傳遞

//修改配置
const routes: Routes = [
  {path: '', redirectTo: '/index', pathMatch: 'full'},
  {path: 'index', component: IndexComponent},
  {path: 'stock/:id', component: StocksComponent },
  {path: '**', component: ErrorPageComponent }
];


//傳遞數(shù)據(jù)
...
<a [routerLink]="['/stock', 1]">股票詳情</a>
// http://localhost:4200/stock/1



//接受參數(shù)
...
import { ActivatedRoute } from '@amgular/router';

export class StockComponent implements OnInit {

    private stockId: number;    
    
    constructor(private routeInfo: ActivatedRoute)
    
    ngOnInit() {
        this.stockId = this.routeInfo.snapshot.params['id'];
    }
    
}

使用snapshot快照的方式傳遞數(shù)據(jù)，因?yàn)槌跏蓟淮?，路由到自身不能傳遞參數(shù)，需要使用訂閱模式。

this.routeInfo.params.subscribe((params: Params) => this.stockId = params['id']);

3. 在路由配置中傳遞

//路由配置配置
const routes: Routes = [
  {path: '', redirectTo: '/index', pathMatch: 'full'},
  {path: 'index', component: IndexComponent, data: {title: 'Index Page'}},
  {path: 'stock/:id', component: StocksComponent, data: {title: 'Stock Page'}},
  {path: '**', component: ErrorPageComponent, data: {title: 'Stock Page'}}
];


//接受參數(shù)
this.title = this.routeInfo.snapshot.date[0]['title'];