Angular：路由参数传递

路由参数传递

查询参数时传递数据

首先设置查询参数

<a [routerLink] = "['/stock']" [queryParams] = "{id:1}">股票</a>

queryParams是什么鬼

然后在跳转组件中设置ActivatedRoute，包含当前路由对象的信息

export class StockComponent implements OnInit {

  private stockID:number;

  constructor(private routeInfo:ActivatedRoute) { }

  ngOnInit() {

    this.stockID = this.routeInfo.snapshot.queryParams["id"];
  }

}

路由路径中传递数据

首先在path中设置：

const routes: Routes = [
    {path:"",component:HomeComponent},
    {path:"stock/:id",component:StockComponent},
    {path:"**",component:Err404Component}
];

然后在对象的链接中设置具体的参数值：

<a [routerLink] = "['/stock',1]">股票</a>

最后在控制中：把queryParams改为params

 ngOnInit() {

    this.stockID = this.routeInfo.snapshot.params["id"];
  }

参数快照

this.stockID = this.routeInfo.snapshot.params["id"];

参数订阅

 this.routeInfo.params.subscribe((params:Params)=>this.stockID = params["id"]);

参数订阅解决了在同一页面，参数不变的问题。

路由配置中传递数据

这个是基于data的

{path:"stock/:id",component:StockComponent,data:[{isPro:true}]},

data是一个数组，里面可以放置多个对象

最后通过ActivatedRoute获取

this.isPro = this.routeInfo.snapshot.data[0].isPro;